React Props: 원시값 vs 참조값 비교하기

React 컴포넌트에 props로 전달하는 값의 타입에 따라 리렌더링 동작이 달라집니다.

 

원시값 props

function Parent() {
    return <Child value={42} />;  // 숫자(원시값)
}

 

값 자체를 직접 비교하므로 직관적으로 값이 바뀌었을때만 리렌더링되므로 직관적입니다.

참조값 props

function Parent() {
    return <Child data={{ id: 42 }} />;  // 객체(참조값)
}

참조값은 값 자체가 같더라도 매 렌더링마다 새로운 객체로 생성되기 때문에 다 객체의 주소가 변경되어 다른 값으로 인식됩니다.

➡️ props의 내용이 바뀌지 않은 경우에도 자녀 컴포넌트는 불필요하게 리렌더링 되는 문제가 발생합니다.

따라서 이에 대응하기 위해 다음과 같은 전략을 사용할 수 있습니다.

 

1. 변경되지 않는 상수 객체는 컴포넌트 외부에 선언합니다.

const STATIC_USER = { id: 1, name: 'Kim' };  // 절대 변하지 않는 값

function Parent() {
    return <Child user={STATIC_USER} />;  // 항상 같은 참조 사용
}

 

2. 객체값의 변경을 useMemo로 추적합니다.

function Parent({ userId }) {
    const userConfig = useMemo(() => ({
        id: userId,
    }), [userId]);

    return <Child config={userConfig} />;
}

 

 

 

 

 

 

 

 

 

 

[참고자료]

모던 리액트 Deep Dive