TIL React 재렌더링 조건 & 렌더링 성능 최적화

React 에서 컴포넌트 렌더링을 수행하는 조건은 ? 

• state(상태) 변경이 있을 때
  
  • 리액트는 state 변경이 감지되면 재렌더링 한다
• 새로운 props가 들어올 떄
  • 부모 컴포넌트로부터 새props가 들어오면 자식 컴포넌트는 재렌더링 된다.
• 기존 props가 업데이트 됐을 때
  • 부모 컴포넌트로부터 받은 props 값을 받은 자식 컴포넌트도 재렌더링 된다
• 부모 컴포넌트가 재렌더링 될 때
  • 부모 컴포넌트가 업데이트 되어 재렌더링 되면 자식 컴포넌트도 재렌더링 된다.

 

렌더링 성능 최적화 방법

1. 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을 사용하여 함수의 값이 바뀌었을 때만 재렌더링 되도록 해야한다

출처

https://fromnowwon.tistory.com/103

https://jmllog.tistory.com/entry/React%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-%EB%B0%A9%EB%B2%95%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

https://velog.io/@shin6403/React-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EB%8A%94-7%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-Hooks-%EA%B8%B0%EC%A4%80