[리액트의 리렌더링에 대한 오해 🔄] 1️⃣ 상태가 바뀌면 어플리케이션 단의 모든 것을 리렌더링 한다?🤔 💡 컴포넌트가 리렌더링 하게 되면 리렌더링 하는 컴포넌트와 그 컴포넌트의 모든 자식

[리액트의 리렌더링에 대한 오해 🔄] 1️⃣ 상태가 바뀌면 어플리케이션 단의 모든 것을 리렌더링 한다?🤔 💡 컴포넌트가 리렌더링 하게 되면 리렌더링 하는 컴포넌트와 그 컴포넌트의 모든 자식 컴포넌트가 리렌더링 합니다. 2️⃣ prop이 바뀌기 때문에 리렌더링을 한다?🤔 💡 리렌더링은 prop의 변화가 아닌 상태 변화로 인해 발생합니다. 리액트는 컴포넌트가 렌더링할 때 그 아래에 있는 모든 자식 컴포넌트의 리렌더링을 시도합니다(prop이 있건 없건). 이렇게 하는 이유는 리액트가 바꾸려는 컴포넌트의 자식 컴포넌트가 변화가 없다는 것을 100% 확신할 수 없기 때문입니다. 예를 들어 prop 없이 현재 시각을 보여주는 컴포넌트만 생각하더라도 상위 컴포넌트가 렌더링될 때 같이 렌더링 되길 기대합니다. [🔖 React.memo가 나온 이유] 위와 같은 이유로 React.memo가 탄생했습니다. "이봐 리액트 이 컴포넌트는 진짜 순수(pure)하니까 prop이 바뀔 때만 리렌더링 해줘~"라고 하는 것이죠. 이를 메모이제이션(memoization)이라 부릅니다. 메모이제이션을 사용할 경우 리액트는 이전 prop을 기억합니다 그리고 리렌더링 시 이 prop을 비교하여 변경 사항이 있을 때만 렌더링을 다시 수행합니다. [🤷‍♀️ 왜 React.memo를 애초에 전체 적용하지 않은 거야?!] 왜 이 기능이 기본 기능이 아닐 지 궁금해하실 수 있을 것 같습니다. 애초에 이 기능을 활용하면 렌더링 자체를 줄일 수 있고 성능 상에 이점이 있어보입니다. 이 아티클의 저자와 마찬가지로 실은 모든 것을 '기억'해둘 필요가 있나 싶습니다. 하나의 컴포넌트를 만들어 내는 연산 비용과 의존성을 기억해 두는 트레이드 오프가 분명 있을거라 생각합니다. 리액트는 이를 선택의 여지로 남겨둔 것 같습니다. 따라서 이건 유의미한 차이가 있을 때 사용하는 것이 좋다고 생각합니다. 그냥 이점이 있겠거니 하고 사용한 React.memo는 의존성이 늘어날 수록 관리가 어렵고 변화를 디버깅하기에 오랜 시간이 걸립니다. (참고로 리액트 팀에서 auto-memozie를 컴파일 단계에서 수행할 수 있도록 고민하고 있다고 합니다 해당 유튜브 : https://www.youtube.com/watch?v=lGEMwh32soc) [🙋‍♀️ Context는 어떤가요?] 위에서 말한 원리와 동일합니다 Context 값이 변하지 않으면 리렌더링 하지 않습니다 만약 변한다면? 모든 자식 컴포넌트가 리렌더링을 합니다. (context값만 가지고 있는 경우입니다 그래서 Context값을 보이지 않는 prop 또는 내부의 prop이라 부릅니다. 적재적소에 기술과 기능을 적절히 활용하는 것이 중요하다는 것을 느끼게 해준 아티클이었습니다.