<aside> ⚠️

필요 없다면 최적화 하지마!

• 웹이나 앱이 느려졌다고 판단됬을 때 최적화를 해라
• 아무도 방문 안하는데 최적화하는 것 만큼 비효율적인 게 없다. </aside>

react에서의 렌더링은 함수를 호출하는 것이다.

리렌더링 문제점

• 리액트는 상태의 변경에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링된다고 소개하지만,
• 실제로는 상태가 변경되는 컴포넌트와 그 이하의 모든 자식 컴포넌트가 랜더링의 대상이 된다.
• 문제는 자식 컴포넌트의 상태가 변경되지 않아도(갱신될 필요가 없어도) 불필요한 랜더링이 일어난다는 것이다.

모든 곳에서 사용해주면 좋을까요?

맞을 수도 있고 아닐 수도 있다.

• 하나하나가 모두 비용이기 때문에

컴포넌트가 리렌더링이 되는 상황

1. *forceUpdate()* , useForceUpdate()를 실행하였을 때
2. props가 변경되었을 때
3. state가 변경되었을 때
4. 부모 컴포넌트가 렌더링되었을 때

• 렌더링이 될 때마다 생성한 변수와 함수를 다시 생성한다!

메모이제이션?

메모이제이션을 위한 React의 API 3개

1. React.memo :해당 컴포넌트가 의존하고 있는 props나 state의 변화가 생길때만 렌더링이 일어난다.
   • React.memo : 컴포넌트