[React] 리액트로 성능 개선하기2. - useCallback과 React.memo

1. 리액트에서 성능 개선을 해보자

useMemo에 이어서...

 

2. useCallback

• 함수를 memorization하기 위해 사용

 

2-1. useCallback의 장점 

리액트 컴포넌트 아넹 함수가 선언되면, 컴포넌트가 렌더링 될 때마다 새로 생성된다. 

하지만 useCallback을 사용하면 컴포넌트가 렌더링 되어도 의존성 배열에서 참조한 값이 변경되지 않으면 새롭게 생성되지 않는다.

 

2-2. useCallback의 구조

• 첫번째 인자 : 콜백함수
• 두번재 인자 : 의존성 배열로 배열 내의 갑싱 변경될 때까지 함수를 저장해노혹 재사용할 수 있도록 함

 

2-3. 주의점

자바스크립트 함수 동등성으로 값이 변화하면 부모 컴포넌트가 렌더링되고 그 값을 전달받은 자식 컴포넌트도 렌더링된다. 이러헥 두번 렌더링되는 것을 방지하기 위해서 useCallback과 React.memo를 사용하여 방지할 수 있다.

관련 코드는 출처에 들어가면 볼 수 있다.

 

3. 출처

https://velog.io/@seongmini/React-Hooks

[React] Hooks

 

4. 도움이 된 게시글

https://velog.io/@hang_kem_0531/useMemo%EC%99%80-useCallback%EC%9D%98-%EC%B0%A8%EC%9D%B4

useMemo와 useCallback의 차이

https://narup.tistory.com/273#----%--%EC%-E%--%EC%-B%-D%--%EC%BB%B-%ED%-F%AC%EB%--%-C%ED%-A%B-%EC%--%--%--props%EB%A-%-C%--%ED%--%A-%EC%--%--%EB%A-%BC%--%EC%A-%--%EB%-B%AC%ED%--%--%EB%-A%--%--%EA%B-%BD%EC%-A%B-