반응형
1. 재렌더링이 발생하는 경우
- 컴포넌트의 state 업데이트
- 컴포넌트의 props 변경
- 재렌더링된 컴포넌트의 모든 하위 컴포넌트
2. 재렌더링 최적화 - 컴포넌트 메모이제이션
메모이제이션: 이전 처리 결과를 저장해둠으로써 처리 속도 향상 및 불필요한 처리 실행x
const Component = memo(()=>{});
위와 같이 함수를 memo로 감싸주면 해당 컴포넌트는 props에 변경이 있을때만 재렌더링된다.
3. 재렌더링 최적화 - 함수 메모이제이션
근데 props로 함수를 넘겨주는 경우에는 코드가 실행될 때마다 함수가 항상 새롭게 생성되기 때문에 이를 props가 변했다고 간주하여 재렌더링이 된다. 이때는 함수를 메모이제이션 해주어야 재렌더링이 발생하지 않는다.
함수의 메모이제이션은 useCallback을 사용한다.
useCallback 사용
- 첫번째 인자: 함수
- 두번째 인자: 의존 배열
// 이 경우 의존 배열이 비어 있어 함수는 처음 작성된 것을 재사용하게 됨.
// 의존 배열에 값이 존재하면 해당 값이 변경되었을 때만 다시 작성됨.
const onClickButton= useCallback(()=>{
alert();
}, []);
4. 재렌더링 최적화 - 변수 메모이제이션
위의 두가지 메모이제이션만큼 자주 쓰이지는 않음.
useMemo
- 첫번째 인자: 함수(반환값에 변수로 설정할 값을 지정)
- 두번째 인자: 의존 배열
// 이 경우 의존 배열이 비어 있어 반환값을 처음 작성된 것(1+4)을 재사용하게 됨.
// 의존 배열에 값이 존재하면 해당 값이 변경되었을 때만 다시 변수가 설정됨
const sum = useMemo(()=> {
return 1+4;
}, []);
이 경우 로직이 복잡하거나 많은 수의 루프가 실행될 때 변수 설정에 의한 부하를 낮출 수 있다.
댓글