[React JS] useState 의 state 변경하는 2가지 방법

여태까지 React 컴포넌트 안에서 데이터를 어떻게 바꾸는 지 배워봤다. 우리가 룰에 맞춰 데이터를 변경했을 때, 리액트가 화면을 어떻게 refresh하는 지 봤습니다. 여기서 refresh란 리렌더링을 말합니다. 

• modifier 함수를 이용해서 컴포넌트의 state를 바꿀 때, 컴포넌트는 새로운 값을 갖고 리렌더링된다(=컴포넌트가 재생성된다). 
• 데이터가 바뀔 때마다 컴포넌트를 리렌더링하고 UI를 refresh한다. 

-> 결론적으로 바닐라 js 를 리액트가 완벽하게 대체하게 됩니다. HTML요소를 생성하거나 찾을 필요도 없고 이벤트리스너를 더해줄 필요도 UI를 업데이트해줄 필요도 없어지게 됩니다. 리액트를 사용하면, 바로 HTML을 만들고 그곳에 이벤트리스너를 더할 수 있으며 UI를 업데이트하면 자동으로 리렌더링됩니다.

 

---

이전에 사용하던 예시코드를 가져와서 state를 바꾸는 방법에 대해 알아봅시다.

const root = document.getElementById("root");

    function App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        //어떤 값을 부여하던 modifier 함수는 그 값으로 업데이트하고 리렌더링을 일으킨다.
        setCounter((current)=> current + 1 );
      };
      return (
        <div>
          <h3>Total clicks : {counter}</h3>
          <button onClick={onClick}>Click me!</button>
        </div>
      );
    }

    ReactDOM.render(<App />, root);

▶state를 바꾸는 2가지 방법

1. modifier함수에 우리가 원하는 값을 직접 넣어주기 (권고되지 않음) 

• e.g.) setCounter(2234);

 

2. 함수를 전달하기(현재의 state를 가지고 새로운 값을 계산하기) ✔

• setCounter((current) => current +1 ); -> 해당 방법을 사용하면 리액트가 이 current가 확실히 현재 값이라는 것을 보장합니다. 
• 우리가 현재 state를 기반으로 계산을 하고싶다면, 함수를 이용하는 것이다. 그래서 다음 state의 값이 현재 값을 바탕으로 나올수 있도록 
• 기존에 setCounter(counter +1) 도 정상작동되는 코드입니다만 state인 counter 의 값이 변동되거나 최근값이라는 보장이 없기때문에 그런 것을 방지하기 위해서 위의 코드를 사용하는 것이 안전합니다.