React setState와 immutable

joonyg·2021년 12월 19일

React

목록 보기

1/5

React의 useState Hook함수는 function component에서 class형 component처럼 state, 즉 동적으로 변화하는 값을 관리하기 위해 사용된다.
하지만 state를 관리하고 setState로 업데이트 하는 일련의 과정은 복잡하며 중요하다.

const [state , setState] = useState< number >(0);

위의 예제에서 state는 숫자를 저장하기에 setState로 어떻게 const의 값을 변화시키냐 하겠지만 state는 모두 객체로서 관리된다. 즉, 일반적인 변수가 아니기에 함수가 종료 되어도 유지 되며 객체이기에 key-value의 값을 변경 가능하다.
그러면 state는 update되니 let을 사용해도 무방한 것처럼 보인다. 하지만 setState가 시행될 때, 바로 state를 update시키는 것이 아니라 queue에 집어넣고 (callback을 인자로 받는 경우) component를 re-rendering 시킨 뒤에 state를 업데이트 시킨다. 따라서 let으로 state를 선언해도 되지만 직접 state를 바꾸면 setState와 같이 component를 re-render시킬 방법이 마땅히 없기에 바뀐 state가 바로 반영되지 않는다.
추가적으로 state에 서버로 부터 받아온 데이터가 객체형태로 들어있다고 하자. key-value쌍이 엄청 많은 경우 component가 re-render될 때마다 어느 부분이 바뀌었는지 객체를 처음부터 끝까지 반복하며 비교하는 것은 매우 비효율적이다. 그래서 react에서는 === (strick operator)를 이용하여 state의 메모리 주소를 비교한다. 이를 react에서 불변성을 지킨다고 한다.

while( life ) { learn more; }