컴포넌트 state 날리는거지 뭐

😎 알게된것

1. React에서 컴포넌트를 re-rendering 시키는 방법 4가지

• state가 변경될 때
• props가 변경될 때
• key prop이 변경될 때
• forceUpdate() 이용할 때

위의 둘은 알고있었는데, 밑의 둘은 처음 안 사실 (!!)

특히 3번! map() 내부에서가 아닌, 그냥 컴포넌트에 key 값을 주어 재렌더링 시키는 방법도 있다는 것을 알았다. 보통 부모 컴포넌트에서 key로 내려줄 state를 관리하고, 특정 조건에서 setState로 해당 state를 변경시키면 그 state를 key prop으로 갖는 자식 컴포넌트의 state를 refresh 시킨다. 다만 그 하위에 있는 컴포넌트들까지 싹 다 DOM Tree에서 제거하고 재렌더링 시키므로 성능 이슈가 있는 것 같다. 그냥 싹 날리는 셈... 실제 어플리케이션에서는 권고하진 않는 방식인 것 같은데, 얼마나 자주 쓰이는지 잘 모르겠다.
마찬가지로 4번 forceUpdate()도 권고되는 방식은 아닌 것 같다. 공식적으로 state와 props가 변할 때만 재렌더링이 이루어지게 짜는 것이 좋을 듯 하다.

💪 Reference

• https://linguinecode.com/post/4-methods-to-re-render-react-component