성능 최적화 (by. React.memo , React.useCallback)

<회고록>

나는 오늘 컴포넌트 성능 최적화를 배우면서 이걸 어떻게 구현하는지 , 성능이 비효율적이다 라는 것을 어떻게 아는 지가 궁금했다.

그래서 나는 오늘 그것에 대해서 말해볼까 한다.

 

성능을 최적화 시킬 수 있는 방법으로는 크게 3가지가 있다.

첫번째는 React.memo다.

React.memo를 사용하는 경우는 props가 바뀌지 않았을때 강제 리렌더링을 막는 경우이다.

그럼 여기서 props가 바뀌지 않았는데 렌더링이 일어나는 경우는 어떤 것이 있을까?

지금 생각나는 예시로는 부모 state가 변경되었을 때 자동적으로 자식 props가 업데이트가 되고 

결국에는 리렌더링이 발생한다.

정리하면 React.memo는 어떤 컴포넌트가 강제로 리렌더링이 일어나는 것을 막을 때 사용한다.

 

두번째는 useCallback()이다.

useCallback은 원하는 시점에 함수를 호출한다는 의미로 강제적으로 함수가 호출되는 것을 막는다

//useCallback(()=>setNumber(data),[name])

하지만 여기서 그치면 안되는데 아까 예시를 가지고 설명하겠다.

만약 부모 컴포넌트의 state가 변경되었고 이로 인해서 props가 업데이트가 된다면 useCallback이 실행될 것이며

이로 인해서 결국엔 불필요하게 함수가 실행된다.

따라서 우리는 이를 막기 위해서 다음과 같은 예시로 작성해야 한다.

//useCallback(()=>setNumber(data),[])

즉 이런 식으로 초기 렌더링이 되었을 때만 이 함수를 실행하게 함으로써 해당 문제를 해결할 수 있다.