[노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 2. setState part Two

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

1.  useState의 함수를 이용해보자!

---

<script type="text/babel">
    const root = document.getElementById("root");
    function App() { 
        const [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>

👉🏻useState를 호출하면 반환되는 함수의 이름은 통념상 'set + 변수 이름'으로 짓는다. 이 함수는 인자로 준 값으로 state값을 변경하고 리렌더링해준다.

• onClick함수를 만들어서 setCounter를 호출한다.
• setCounter에 인자로 counter에 1을 더한 숫자를 넣어준다.
• onClick함수를 button tag에 넣어준다.

클릭하면 숫자가 잘 올라감!