부모 컴포넌트 에서 render() 함수가 실행되면 자식들도 무조건 render() 가 한번 실행이 된다.

하지만 실제 돔은 변경 점만 반영하기 때문에 괜찮다.

하지만 render() 실행 조차도 최적화 하고 싶다면

클래스인 경우

• shouldComponentUpdate
• PureComponent

함수인 경우

• memo

주의할 점은 PureComponent 나 memo 의 비교 함수 없이 자동 비교를 사용하면 부모가 내려준 함수에 대한 비교는 못하기 때문에 제대로 된 최적화가 될 수 없다. 그렇기 때문에 가능하면 shouldComponentUpdate 나 memo 의 두번째 인자 함수를 이용해서 비교 문을 작성하자.

// 클래스 컴포넌트

// 매 렌더시 같은 함수
<TodoList todo={todo} handleDone={this.handleDone} />

// 매 렌더마다 다른 함수 생성
<TodoList todo={todo} handleDone={() => console.log('done?')} />

클래스 컴포넌트에서 두번째 경우와 같이 자식에게 함수를 전달하는 경우 매 렌더링 마다 새로운 함수를 전달하는 셈이다.

그렇기 때문에 PureComponent 나 기본 memo 는 최적화 되지 않는다.

함수형 컴포넌트에서 클래스 형의 handleDone={this.handleDone} 메소드 처럼 고정 하려면 hooks의 useCallback를 이용할 수 있다.