말은 쉽지, 코드를 보여줘!

컴포넌트 성능 저하는 일반적으로 불필요한 컴포넌트 리렌더링 때문에 발생하는데 리렌더링 되는 상황은 아래와 같다. ​ 1. props 가 변경되었을 때 2. state 가 변경되었을 때 3. 부모 컴포넌트가 리렌더링 될 때 4. forceUpdate 함수가 실행될 때 6. useSelector 로 구독하는 값이 변경되었을 때 ​ 1, 2번은 변경된 상태에 따라 컴포넌트도 변화해야 하기 때문에 당연히 리렌더링 해야 하고 4번은 필요에 의해 강제로 리렌더링을 수행시키는 것이기 때문에 최대한 지양하면 된다. ​ 그런데 3번을 보면 부모컨포넌트가 리렌더링 된다고 해도 어떤 자식 컴포넌트는 변경되는 것이 없이 때문에 리렌더링이 필요하지 않을 수 있다. 바로 부모 컴포넌트에서 받아오는 props 가 바뀌지 않은 경우..

컴포넌트 리렌더링이라 함은 함수형 컴포넌트 기준 JSX문법으로 작성된 view를 리턴하는 함수가 다시 수행되는 거라고 생각하면 된다. 그렇다면 컴포넌트 업데이트는 뭘까? 결국 같은 말 아닌가? 업데이트가 결국 리렌더링으로 연결되기 때문에 그냥 비슷한 의미로 해석하고 있었으나 가끔 이를 혼용해서 쓰는 글들이 보이기 시작하니 좀 헷갈려서 정리해놓는다. ​ 일단 업데이트가 더 큰 의미로 말그대로 컴포넌트가 업데이트되는 것을 말하고 그 과정에 리렌더링이 발생한다. 즉, 순서상 업데이트->리렌더링 이 된다. ​ 컴포넌트가 업데이트 되는 상황은 아래와 같다. ​ 1. props 가 변경되었을 때 2. state 가 변경되었을 때 3. 부모 컴포넌트가 리렌더링 될 때 4. forceUpdate 함수가 실행될 때 6...