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

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

 

1.  함수로 counter 값 변경하기

---

<script type="text/babel">
    function App() { 
        const [counter, setCounter] = React.useState(0); 
        const onClick = () => {
            setCounter((current) => current + 1);
        }
        return(
            <div>
                <h3>Total clicks : {counter}</h3>
                <button onClick={onClick}>Click me!</button>
            </div>
        );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root); 
</script>

👉🏻setCounter에 현재 state를 기반으로 다음 state를 계산하고 싶다면 함수를 전달하는 것이 더 안전한 방법이다. 이후 업데이트 등의 상황이 와도 혼돈이 덜 생긴다.

• setCounter함수에 새로운 함수를 전달해준다. counter를 current라는 값으로 받아 1을 더해 반환해준다.