useState Functional Updates

 

이렇게 또 useState를 주제로 글을 쓰게 되었습니다.

 

한번 더 공식문서의 중요성을 느끼고 정리하면 좋겠다 생각되어 이렇게 글을 작성하네요

 

이번에는 제가 page 단위로 계속해서 10개의 데이터들을 불러와야 하는 작업을 하고 있었습니다.

 

근데 0페이지에서 1페이지의 내용들까지는 불러오는데 그 이후의 데이터들을 못불러오는 것입니다.

 

이런식으로 0에서 1로는 업데이트가 되었는데 1에서 머물러 있는 상태가 계속 되었습니다.

 

count를 업데이트 하는 useState를 만든다고 생각했을 때, 이렇게 배웠고 실제 이렇게 사용했었으니까요

const addButton = () => {
  const [count, setCount] = useState(0);

  const onClick = () => {
      setCount(count + 1);
  }

  return (
      <div>
          <button onClick={onClick}> +1 </button>
      </div>
  );
}

그래서 여러가지 해결방법을 찾아보던 중 리액트 공식문서의 내용을 보게 되었습니다.

즉, 새로운 상태가 바로 이전 상태를 사용해서 계산되어야 한다면, setState 함수에 "함수"를 인자로 넣어줘야 이전 상태의 값을 바탕으로 새로운 값을 계산한다는 것입니다.

 

반대로 setState함수에 "값"을 인자로 넣을 땐, 함수는 바로 이전 상태 값이 아니라 다른 상태의 값을 바탕으로 새로운 값을 계산을 하게 될 것입니다.

 

React Batch Process

 

위에서 언급한 이전 상태에 대해서 좀 더 알아보도록 하겠습니다.

 

리액트는 Synchronous한 하나의 LifeCycle Method나, 이벤트 핸들러 안에서 일어나는 여러 번의 업데이트들은 한 번에 묶어서 처리한 후, 마지막으로 Updata 된 값으로 state 값을 결정하고 단 한번만 렌더링을 합니다.

 

그래서 "이전 상태"는 Batch Process로 인해 상태 업데이트가 진행될 때, 동일한 setCount를 여러 번 실행했을 때, 실행과 실행 사이의 상태라고 생각하면 될 것 같습니다.

 

setCount(count + 1);

setCount(count => count + 1);

즉, 위의 setCount는 마지막 상태만 반영하여 리렌더링을 하기 때문에 아무리 실행해도 결과값은 1일 수 밖에 없는 것 입니다.

그러나 아래 setCount는 함수형 인자를 통해 첫 번째 실행 이후의 결과에도 접근할 수 있어 실행한 만큼의 count가 업데이트 됩니다.

 

이렇게 해서 page에 대한 값을 함수형 인자를 통해 해결을 할 수 있었습니다.

 

참조 블로그

https://yeoulcoding.tistory.com/169