리액트 컴포넌트 안 바뀜(react component not change)

결론부터 말하겠다.

새로운 key를 줘라.

예제 코드와 결과

 구글 map api를 사용하는 간단한 예제이다.

return  <SimpleMap center={{ lat: loc.lat, lng: loc.lng }} zoom={16} />

props를 바꾸어 전달해도, SimpleMap 컴포넌트가 update 되지 않을 것이다.

컴포넌트 안 바뀜

 

그럼 이제 key값을 주자.

단, key는 props에 따라 변화하는 값이어야 한다.

여기서는 간단하게 위도(lat) 정보를 key값으로 주자.

 

return  <SimpleMap key={loc.lat} center={{ lat: loc.lat, lng: loc.lng }} zoom={16} />

컴포넌트 바뀜

 

 

 

 

이런 현상이 일어나는 이유

react는 항상 최적화를 위해 "필요한" 부분만 업데이트한다. 그렇지 않은 부분은 기존의 그대로 둔다.

 

그럼 이 "필요한" 부분을 누가 판단하는가?

컴포넌트의 prop이나 state가 변경되면 React는 새로 반환된 엘리먼트를 이전에 렌더링 된 엘리먼트와 비교해서 실제 DOM 업데이트가 필요한지 여부를 결정합니다. 같지 않을 경우 React는 DOM을 업데이트합니다.
-react 공식 홈페이지-

성능 최적화 – React

 

그렇다.

새 element와 기존의 element를 "비교"하여 update를 결정한다.

여기서 "비교"라는 말에 주목할 필요가 있다.

 

이 최적화를 위해 "비교"하는 일은 text를 대상으로 한다.

적어도 내가 코딩하며 겪은 바에 의하면, text로 판단할 수 있는 update만 받아들이고 text로 판단할 수 없는 몇몇(지금의 구글 map api 같은 경우)은 update하지 않는다. (virtual DOM 같은 이야기가 나오는데 나중에 포스팅하도록 하겠다.)

 

모든 걸 완벽히 비교하면 너무 오랜 시간이 걸리기 때문에, 최적화를 할 수 없다는 이유로 하지 않는 것이다.

 

props 변경을 했는데 element(또는 component)가 업데이트되지 않는다면 업데이트되는 key 값을 주면 해결된다.

 

지식이 늘었다!