(펌)개념 정리
React 리랜더링 조건과 랜더링 성능 최적화 방법
ble194
2022. 11. 15. 17:16
React 에서 컴포넌트 렌더링을 수행하는 조건은 ?
- state(상태) 변경이 있을 때
- 리액트는 state 변경이 감지되면 재렌더링 한다
- 새로운 props가 들어올 떄
- 부모 컴포넌트로부터 새props가 들어오면 자식 컴포넌트는 재렌더링 된다.
- 기존 props가 업데이트 됐을 때
- 부모 컴포넌트로부터 받은 props 값을 받은 자식 컴포넌트도 재렌더링 된다
- 부모 컴포넌트가 재렌더링 될 때
- 부모 컴포넌트가 업데이트 되어 재렌더링 되면 자식 컴포넌트도 재렌더링 된다.
렌더링 성능 최적화 방법
- state 선언 위치
- 렌더링 수행 조건으로 state 값의 변화가 있는데 state가 변경이 되면 그 state가 선언된 컴포넌트와 하위 컴포넌트들이 모두 리렌더링 된다.
- 그렇다면 state 선언 위치를 잘 설정해 주는 것만으로도 리렌더링 횟수를 줄일 수 있고 최적화도 시켜줄 수 있다
2. React.memo()
React.memo()는 컴포넌트를 렌더링하여 그 결과를 메모이져이션(memoization) 하는데 다음 렌더링이 일어날 때 props가 같으면 메모이져이션된 내용을 재사용하여 불필요한 리렌더링을 피할 수 있다.
3. key 값으로 index를 사용하지 않기
React에서 map을 돌리는 경우에 고유 key 값을 부여하도록 하는데 index로 key값을 설정한다면 중간에 새로운 값이 삽입된 경우 리마운트가 일어나며 데이터가 매칭이 되지 않는 오류도 발생할 수 있다.
4. useMemo
- 컴포넌트 내에 함수 값 리턴이 오래 걸린다면 리렌더링 될 때마다 함수가 호출되면서 많은 시간이 소요된다. useMemo는 종속 변수들이 변하지 않으면 함수를 굳이 다시 호출하지 않고 이전에 반환한 참조값을 재사용한다.
- 함수 호출 시간도 세이브할 수 있고 같은 값을 props로 받는 하위 컴포넌트의 리렌더링도 방지할 수 있다.
- 자식 컴포넌트는 함수의 종속 변수들이 변경될 때만 재렌더링 된다
5. useCallback
- useMemo는 메모이져이션(memoization) 된 함수를 넘겨주는게 아닌 함수의 리턴 값을 넘겨주기 때문에, 함수 props의 불필요한 재렌더링은 막아줄 수 없다.
- 이때 useCallback을 사용하는 것이다. 부모 컴포넌트가 재렌더링할 때마다 동일한 props 값을 전달하더라도 새로운 콜백이 발생하기 때문에 자식 컴포넌트도 리렌더링을 하게 되는 경우가 발생한다
- 부모 컴포넌트가 재렌더링될 때마다 함수도 새로 생성되기 때문에, 자식 컴포넌트도 새로운 props로 인식하고 재렌더링하게 된다. 이를 방지하기 위해서는 useCallback을 사용하여 함수의 값이 바뀌었을 때만 재렌더링 되도록 해야한다