React 렌더링
React의 컴포넌트는 state라고 불리는 상태값과 props라고 불리는 전달값이 있습니다.
상태값과 전달값은 컴포넌트의 렌더링와 아주 직접적인 관계가 있습니다. 상태가 변이함에 따라 컴포넌트가 보여지는 형태도 달라져야 하기 때문입니다.
그러기에 React의 컴포넌트는 state와 props의 변이를 계속 관찰하고 있고, 변이가 발생하게 되면 메모리에 저장해 둔 Virtual DOM에 변이 된 상태값을 대입하여 브라우저에 렌더링하는 과정을 거칩니다.
이 과정에서 컴포넌트 안에 정의 된 로직을 다시 수행하게 되는데, 만약 복잡한 로직의 연산 과정이 포함 되었을 경우 사소한 상태값의 변이로 인해 재연산을 수행하게 됩니다.
심지어 변이 된 상태값이 해당 연산의 결과에 아무런 영향을 끼치지 않는다고 해도 말입니다.
그런데 React 프로젝트에는 수많은 컴포넌트들이 존재하고, 이 컴포넌트들은 유기적으로 연결 되어 하나의 페이지가 됩니다.
컴포넌트들이 긴밀하게 연결되는 과정에서 자연스럽게 부모 / 자식 관계가 형성이 될 것이고, 부모의 상태값이 변경된다면 부모를 렌더링하는 과정에서 해당 컴포넌트와 연결 된 자식 컴포넌트들도 모두 렌더링을 다시 수행합니다. 부모의 상태값이 변했다고 해서 무조건 자식 컴포넌트에게 영향을 미치는 것은 아닌데도 말이죠.
React.memo
위에서 설명한 상황에서 사용할 수 있는 유용한 함수가 있습니다.
React.memo(component)는 컴포넌트 본인의 state와 props에 변이가 발생한 상황이 아니라면 해당 컴포넌트는 재연산 과정을 수행하지 않는다고 선언해주는 함수입니다.
아래와 같이 사용합니다.
1
2
3
4
5
6
7
import { FC, memo } from 'react';
const Component: FC<Props> = (props: Props) => {
return (<div />);
};
export default memo(Component);
주의할 점
“컴포넌트에게 영향을 미치는 상태값의 수정이 이루어지지 않는다면 렌더링을 하지 않는다.”
위에서 설명한 것만 들어보면 React.memo 함수는 단점이 없어보입니다.
그런데 잘 생각해보면, 컴포넌트에 영향을 미치는 상태값의 수정인지 아닌지는 어떻게 알 수 있을까요?
React.memo 함수는 매개변수로 전달 된 컴포넌트의 state와 props를 탐색하고, 이전 값과 현재 값이 다른지 비교하는 로직을 수행하게 됩니다.
부모 컴포넌트와 대상 컴포넌트의 모든 변이 때마다 비교 로직을 수행하면 발생 될 오버헤드가 상당히 우려스럽습니다.
그렇기 때문에 비교 로직에 의한 오버헤드보다 재연산을 수행하지 않았을 때 얻는 이점이 더 크다고 판단 될 때만 선택적으로 사용하는 것이 중요합니다.