[노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 0. Understanding State

참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby

1.  클릭하면 카운터가 올라가는 기능 만들기

---

<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>
        );
    ReactDOM.render(<Container />, root); 
</script>

• counter를 1씩 올려주는 함수 counterUp을 만든다.
• 어플리케이션을 render해주는 render 함수를 만든다.
• 버튼을 클릭하면 counterUp을 실행하고 그 때마다 render 함수도 호출해서 변경된 counter 값을 적용시킨다.

💡리액트와 바닐라 자바스크립트의 차이

• 바닐라 자바스크립트: counter가 포함된 span과 body가 업데이트 된다.
• 리액트: counter인 숫자만 업데이트 된다.