React의 렌더링 성능 최적화 방법을 알아보자

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

1. props가 변경되었을 때

2. state가 변경되었을 때

3. forceUpdate()를 실행하였을 때

4. 부모 컴포넌트가 렌더링 되었을 때

 

React 컴포넌트는 기본적으로 부모 컴포넌트가 렌더링 혹은 리렌더링되면 변경된 내용이 없더라도

자식 컴포넌트들도 리렌더링이 일어난다.

불필요한 렌더링이 발생하면 당연히 성능 저하, 손실이 발생하게 되는데 렌더링을 최적화하여 손실을 줄이는 방법을 알아보자!

 

 

1. state 선언 위치

렌더링 수행 조건으로 state 값의 변화가 있는데 state가 변경이 되면 그 state가 선언된 컴포넌트와 하위 컴포넌트들이 모두 리렌더링 된다. 그렇다면 state 선언 위치를 잘 설정해 주는 것만으로도 리렌더링 횟수를 줄일 수 있고 최적화도 시켜줄 수 있겠지!!!

 

기본적인 state 선언은 해당 state를 사용할 최상단 컴포넌트에 선언하는 것이다.

Index

└ Header

└ ItemList

    └ Items

└ Footer

위와 같은 구조에서 ItemList와 Items에서 사용해야 할 Item state가 있다고 가정할 때 state선언을 최상단인 ItemList에 해줘야 한다.

만약 ItemList가 아닌 Index에서 state선언을 해준다면 ItemList 뿐만 아니라 Header와 Footer에서도 리렌더링이 일어날 것이다.

 

 

2. React.memo()

React.memo는 컴포넌트를 렌더링하여 그 결과를 메모이징 하는데 다음 렌더링이 일어날 때 props가 같으면 메모이징된 내용을 재사용하여 불필요한 리렌더링을 피할 수 있다.

 

 

3. key값으로 index를 사용하지 않기

리액트에서 map을 돌리는 경우에 고유 key값을 부여하도록 하는데 index로 key값을 설정한다면 중간에 새로운 값이 삽입된 경우 리마운트가 일어나며 데이터가 매칭이 되지 않는 오류도 발생할 수 있다.

 

 

4. useMemo

컴포넌트 내에 함수 값 리턴이 오래 걸린다면 리렌더링 될 때마다 함수가 호출되면서 많은 시간이 소요된다. useMemo는 종속 변수들이 변하지 않으면 함수를 굳이 다시 호출하지 않고 이전에 반환한 참조값을 재사용한다. 함수 호출 시간도 세이브할 수 있고 같은 값을 props로 받는 하위 컴포넌트의 리렌더링도 방지할 수 있다.

 

5. useCallback

React의 Hook 중 하나, 컴포넌트 내부 로직에서 쓰이는 함수의 재렌더링을 막는다.

종속성 배열이 빈배열([]): 어떤 상태값에도 반응하지 않음
종속성 배열이 없을 때: 모든 상태 변화에 반응

 

함수와 종속성 배열(dependency array)을 매개변수로 전달받으면 메모이제이션된 콜백을 반환

객체 타입이므로 props로 전달될 때 얕은비교가 된다.

😱 만약 자식 컴포넌트에 전달하는 콜백 함수를 inline 함수로 사용하고 있거나, 컴포넌트 내에서 함수를 생성하고 있다면
-> 새로운 함수 참조 값을 계속해서 만들고 있는 것
-> 메모리가 계속 낭비되고 있다.