React ReRender가 안될경우 확인 해볼 것

다들 아는 것처럼 React.js 는 변화를 감지하고 Rerendering 을 진행한다.

그런데, 변화가 있었는데도 불구하고 (useState든, setState든) Rerendering 이 되지 않을 경우가 있다.

 

그럴 경우, Rerendering을 하는 Object의 크기를 봐야한다.

만약 내부에 객체 속성이 많을 경우 React.js는 변화를 감지 할 수 없을 수도 있기에,

사용할 object의 속성을 우리가 필요한 속성만 가져다 쓰는 간략화? 경량화?의 과정을 거쳐야 한다.

 

필자는 firebase 에 데이터를 요청해서 쓰고 있었는데, 리렌더가 되지 않아 확인 했더니,

firebase에서 보내는 object가 너무 커서 생기는 문제였다.

그래서 object에서 필자가 사용하는 object의 요소만 가져와서 사용하였다.

 

강의 내용 중 다른 방법도 제시 됬는데,

State를 변경 하는 함수에서, Object.assign({},obj) 를 이용하는 방법이다.

Object.assign 함수는 첫 번째 인자로 타겟, 두번째 인자로 소스를 요구하며

소스의 오브젝트를 타겟으로 배치하는 함수이다.

 

저런식으로 빈 오브젝트에 기존 오브젝트를 배치하게 되면,

리액트는 새로운 오브젝트가 생성된 걸 감지한 후 리렌더링을 진행하게된다.

 

이런 문제가 생길 경우 콘솔로 찍어봐도 변화를 "우리는" 찾을 수 있어서 ( 실제로 리렌더만 진행 안되고 있는 것이지

값의 변화는 있다. ) 디버깅이 힘들 수가 있기에 포스팅 해본다.

결국 판단의 주체는 리액트가 하는 것임을 상기 시켜주는 문제이다.