[React] 리액트 재렌더링 조건 & 렌더링 성능 최적화 방법

리액트가 언제 재렌더링이 되며, 불필요한 렌더링을 막고 성능을 최적화하기 위해서는 어떻게 해야할 지에 대해 알아보자.

 

 

 

목차

1. 리액트 재렌더링 조건
2. 렌더링 성능 최적화 방법

 

 

 

 

 

리액트 재렌더링 조건

1. state(상태) 변경이 있을 때

리액트는 state 변경이 감지되면 재렌더링 한다.

 

2. 새로운 props가 들어올 때

부모 컴포넌트로부터 새 props가 들어오면 자식 컴포넌트는 재렌더링 된다.

 

3. 기존 props가 업데이트 됐을 때

부모 컴포넌트로부터 받은 props가 변경되면 props 값을 받은 자식 컴포넌트도 재렌더링 된다.

 

4. 부모 컴포넌트가 재렌더링 될 때

부모 컴포넌트가 업데이트 되어 재렌더링 되면 자식 컴포넌트도 재렌더링 된다.

 

 

 

 

 

렌더링 성능 최적화 방법

과도한 재렌더링은 성능 저하의 원인이 된다. 필요할 때만 재렌더링될 수 있도록 하는 방법으로 최적화 작업을 해줄 수 있다.

 

1. useMemo 사용

컴포넌트 내에 어떤 함수가 값을 리턴하는 데 너무 많은 시간을 소요한다면 매번 재렌더링하는 게 부담될 수 있다. 자식 컴포넌트에서 그 리턴 값을 받아서 사용한다면 자식 컴포넌트도 함수가 호출될 때마다 재렌더링 해야 할 것이다.

 

useMemo 훅을 사용하면, 함수의 종속 변수들이 변경되지 않았다면 해당 함수를 호출하지 않는다. 따라서 불필요한 재렌더링 현상을 방지할 수 있다. 자식 컴포넌트는 함수의 종속 변수들이 변경될 때만 재렌더링 된다.

 

 

2. useCallback 사용

부모 컴포넌트에서 자식 컴포넌트로 함수 props를 넘겨줄 때 useCallback을 사용해보자.

useMemo는 memoization된 함수를 넘겨주는 게 아닌 함수의 리턴 값을 넘겨주기 때문에, 함수 props의 불필요한 재렌더링은 막아줄 수 없다. 이 때 useCallback을 사용하는 것이다. 부모 컴포넌트가 재렌더링할 때마다 동일한 props 값을 전달하더라도 새로운 콜백이 발생하고 때문에 자식 컴포넌트도 리렌더링을 하게 되는 경우가 발생한다.

 

부모 컴포넌트가 재렌더링될 때마다 함수도 새로 생성되기 때문에, 자식 컴포넌트도 새로운 props로 인식하고 재렌더링하게 된다. 이를 방지하기 위해서는 useCallback을 사용하여 함수의 값이 바뀌었을 때만 재렌더링 되도록 해야한다.