<2021년 4월 3일 개발 일지>
React 의 useCallback 훅 이란?
- 리액트 프레임워크에서 useCallback 이라는 훅이 있다. 컴포넌트가 렌더링 될 때마다 컴포넌트와 관련된 함수가 새로 생성이 되는데, 이때 함수가 업데이트되지 않고 이전에 생성했던 함수를 그대로 사용하고 싶다면 useCallback 훅을 사용하면 불필요한 함수 생성을 방지할 수 있다. 앱의 성능 최적화에 도움을 준다.
- useCallback 을 사용하여 함수를 생성하지 않고 이전의 함수를 그대로 사용하고 싶다면 훅으로 감싸주면 된다.
deps
에는 함수가 업데이트되는 state 또는 prop 값을 추가해야 한다. 아래 예시에서는 inputs 의 값이 변경될 때 마다 onInputChange 의 함수 값이 달라지기 때문에 deps에 inputs 를 추가해준 것 이다.- 만약 deps 에 inputs 를 넣지 않는다면 onInputChange 함수 내에서 참조하는 모든 값이 함수가 최초에 생성될 때 참고한 e, inputs 값을 가져와서 함수가 실행되기 때문에 정상적으로 작동되지 않을 것이다.
- useCallback 사용 방법 예시
const onInputChange = () => {
// Input 내용이 변경될 때 마다 실행되는 함수
}
// useCallback 으로 감싸기
const onInputChange = useCallback((e) => {
// Input 내용이 변경될 때 마다 실행되는 함수
const { name, value } = e.target;
setInputs({
...inputs,
[name]: value
})
}, [ inputs ])
React.memo 함수 사용법
- React.memo 는 컴포넌트의 prop 이 바뀌었을 때만 리렌더링하고 그렇지 않으면 이전에 기억해둔 컴포넌트를 그대로 사용하도록 해주는 함수이다.
- useCallback 과 함께 사용하면 컴포넌트 내에 함수를 재사용하고 컴포넌트 리렌더링을 방지함으로써 컴포넌트를 최적화할 수 있다.
- React.memo 사용 방법 예시
const MyNameCard: React.FC = () => {
return (
<div>my name card</div>
)
}
export default React.memo(MyNameCard);
// 또는 export 를 하지 않는 컴포넌트의 경우에는 React.memo 로 전체 함수를 감싸주면 된다.
const MyNameCardPhoto = React.memo(() => {
return (
<div>my name card Photo</div>
)
})
// 이전 props 의 inputs props 과 새로운 props 의 inputs props 이 같다면 리렌더링 하지 않겠다고 선언하는 방법
const MyNameCard = React.memo(({ inputs }) => {
return (
<div>{inputs.name}</div>
)
})
export default React.memo(MyNameCard, (prevProps, nextProps) => nextProps.inputs === prevProps.inputs);
크롬 익스텐션 React Developer Tools
: 컴포넌트 re-rendering 확인하는 방법 useCallback 훅이 제대로 작동하는지 크럼 익스텐션으로 확인할 수 있다.
- 크롬 브라우저에서 React DevTools 설치 (React Developer Tools - Chrome Web Store)
- 크롬 dev tool 열기 (Inspect)
- React Components 클릭
- 톱니바퀴 설정 아이콘 버튼 클릭
- Highlight updates when components render 에 체크
- 브라우저에서 컴포넌트 테스트를 해보면 컴포넌트가 렌더링 될 때마다 하이라이트 되는 것을 확인할 수 있다.