노마드 코더 React 강의:영화 웹서비스 만들기- 3.2 중간 메모

#3 STATE 부분 

3.2 자체 주석 메모

<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() {
            //** useState() 기본 사용 **
            // const data = React.useState(0);
            // console.log(data);
            // 이렇게 할 경우, [0, ƒ] 의 리스트가 생성됨
            // 0 는 data 의 값이고, f 는 값에 사용할 수 있는 함수
            // const data = React.useState(); ()안에 변수 초깃값 입력, 비어 있으면 undefined,  

            // ** javascript 에서 편하게 배열 값 변수에 담기
            // 보통 [값, set변경값] 형태로 이름을 지어주고 아래 형태로 사용. const 사용 가능.
            const [counter, setCounter] = React.useState(0);
            const onClick = () => {
                setCounter(counter+1);
            }

            return(
            <div>
                <div>Click count : {counter}</div>
                <button onClick={onClick}>Up</button>
            </div>                
        );
        }
        
        ReactDOM.render(<App/>, root);
    </script>

 

상기 코드로 HTML에 <div id="root"></div> 에 작동하면 , 

div 전체가 아니라 count 값만 바뀐다. 

 

innerText= 를 통해서 넣어줄 경우 div 전체가 rerendering 되는 것과 달리 카운트 값만 바뀌고,

 그것을 검사창에서 확인할 수 있다.

 

와우... 

 

보이는 것은 같지만 몇 밀리초 정도 더 빠르다고 한다.

 

오우...