오늘도 코딩하나

[React] ReactJS로 영화 웹 서비스 만들기_(2) 본문

React/노마드코더

[React] ReactJS로 영화 웹 서비스 만들기_(2)

오늘도 코딩하나 2024. 12. 29. 17:03

https://nomadcoders.co/react-for-beginners

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React for Beginners

nomadcoders.co

 

강의 내용 요약
#3.0 ~ #3.3

 

○ State

   ※ state : 데이터가 저장되는 곳

<!DOCTYPE html>
<html>

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.getElementById('root');
    let counter = 0;
    function countUp() {
        counter = counter + 1;
        render();
    }
    function render() {
        ReactDOM.render(<Container />, root);
    }
    const Container = () => (
        <div>
            <h3>Total clicks: {counter}</h3>
            <button onClick={countUp}>Click me</button>
        </div>
    );
    render();
</script>

</html>

 

   

  ▶ Container 리렌더링

  • render()가 실행되면 Container 컴포넌트가 렌더링되는데
    Container가 렌더링될 때는 count가 0이다.
    countUp()을 실행해서 Container컴포넌트에 적용하고 싶으면
    Container 컴포넌트를 리렌더링 해줘야함!
  • ReactJS는 UI에서 바뀐부분만 업데이트 해준다.

 

<!DOCTYPE html>
<html>

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.getElementById('root');
    function App() {
        let [counter, setCounter] = React.useState(0);
        const onClick = () => {
            setCounter(counter + 1)
        }
        return (
            <div>
                <h3>Total clicks: {counter}</h3>
                <button onClick={onClick}>Click me</button>
            </div>
        )
    };
    ReactDOM.render(<App />, root);
</script>

</html>
  • useState의 형태 => [state, modifier]
    => counter같은 데이터 + 그 데이터 값을 바꿀 함수
  • ☆ modifier을 이용해서 state를 바꾸면
    데이터 값이 바뀌고 컴포넌트도 동시에 리렌더링된다!!
    => 위에서 했던 것처럼 직접 리렌더링 안해도된다!!!

 

그냥 공식처럼 useState는 이런 것이다!가 아니라
vanillaJS와 비교하면서 이게 어떻게 작동하는 원리인지 설명을 들으니 이해가 쉬웠다..!

 

'React > 노마드코더' 카테고리의 다른 글

[React] ReactJS로 영화 웹 서비스 만들기_(6)  (1) 2025.01.03
[React] ReactJS로 영화 웹 서비스 만들기_(5)  (0) 2025.01.02
[React] ReactJS로 영화 웹 서비스 만들기_(4)  (1) 2025.01.01
[React] ReactJS로 영화 웹 서비스 만들기_(3)  (1) 2024.12.30
[React] ReactJS로 영화 웹 서비스 만들기_(1)  (1) 2024.12.28
'React/노마드코더' Related Articles more