React 2 - state

state

data가 저장되는 곳이라고 이해하자

const App = () => {
  const data = React.useState();
  console.log(data);
  return (
    <div>
    <h3>title</h3>
    <button>btn</button>
    </div>
  );
};
ReactDOM.render(<App />, root);

console.log(data)의 결과는 다음과 같다

useState를 사용했을 때, useState는 배열을 반환하는데, 첫번째 요소는 data의 value(값)이고, 두번째 배열은 modifier (data 값을 바꿀 때 이용할 function)이다.

undefined(초기화를 안했기 때문에 undefined)는 data를 말하고, f는 그 data를 바꾸는 함수를 말한다.
(eventListener에 들어가는 handler 와 비슷함)

저 data를 꺼내서 쓰기 위해서 data[0], data[1]과 같이 사용해야 하는데, 더 나은 코드가 있다.

const [v, modifier] = data;
//아래와 같은 코드이다.
const v = data[0];
const modifier = data[1];

왜 modifier가 필요할까?

그냥 v = 100 이렇게 해버리면 될걸 왜 modifier가 필요한 것일까?

const App = () => {
      let [counter, modifier] = React.useState(0);
      const onClick = () => {
        counter += 1;
        console.log(counter);
      };
      return (
        <div>
          <h3>Total Click: {counter}</h3>
          <button onClick={onClick}>Click Me!</button>
        </div>
      );
    };
    ReactDOM.render(<App />, root);

이 상태에서 화면에 보여지는 숫자를 바꾸기 위해서는 렌더링이 필요하다. 물론 ReactDOM.render(, root);를 onClick함수에 넣어주면 되지만, 일일히 하기에는 너무 귀찮다.
여기서 modifier 함수를 제공해주는 이유가 나온다.
modifier 함수는 해당 값으로 변수를 업데이트하고 리렌더링을 일으킨다. onClick함수에 써줬던 것을 해주는 셈이다. 그리고 modifier는 이렇게 변수값을 바꿔주기 때문에 set변수명으로 쓴다

const App = () => {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
      };
      return (
        <div>
          <h3>Total Click: {counter}</h3>
          <button onClick={onClick}>Click Me!</button>
        </div>
      );
    };
    ReactDOM.render(<App />, root);

즉, modifier 함수로 state를 바꿀 때, 컴포넌트 전체가 새로운 값을 가지고 재생성된다.
React는 state(데이터)가 바뀔때마다 컴포넌트를 리렌더링하고 UI를 refresh한다.

여기서 바로 전 state에서 가져온 counter로 해당 값을 바꾸려고 하는데, 어디선가 바뀌어져 온 값으로 계산할 경우가 생긴다. 위에서 설명한 방법 외에 state를 바꾸는 다른 방법이 있다.
1. 직접 값을 설정
2. 함수를 전달
modifier안에 함수를 쓸 수 있다.

setCounter(counter + 1);
//위와 아래는 같지만 아래가 더 안전하다.
setCounter((current) => current + 1);

아래처럼 사용했을 때, current는 현재 값을 보장한다.