[클린코드 리액트] Props로 Object 내리는 것 지양하기

 

React에서는 Props를 통해 컴포넌트 간 데이터를 전달하는데, 특히 Object를 Props로 전달할 때 주의해야 할 사항들이 있습니다. 이를 효율적으로 관리하기 위해 몇 가지 팁을 살펴보겠습니다.

JavaScript에서의 Object

JavaScript에서의 값은 원시 값 혹은 객체 입니다. 흔하게 사용하는 List도 다른 언어에서는 특정 타입의 값의 집합이지만 JavaScript에서는 Object 입니다.

// Object
const Object = {
  a: 'a'
};

// Object
const Array = [1, 2, 3];

Object.is와 불필요한 리랜더링

React에서는 리랜더링 시 컴포넌트 비교를 위해 Object.is 메서드를 사용합니다. 이 메서드는 같은 모양의 객체라도 메모리 주소값이 다르면 서로 다른 객체로 판단하여 false를 반환합니다. 따라서 같은 내용의 객체라도 새로운 객체로 인식되면 불필요한 리랜더링이 발생할 수 있습니다.

 

Object.is([], []); // false
const foo = { a: 1 };
const bar = { a: 1 };
const sameFoo = foo;
Object.is(foo, foo); // true
Object.is(foo, bar); // false
Object.is(foo, sameFoo); // true

 

해결 방법

1. 변하지 않는 값은 외부에 선언: 변하지 않는 값은 컴포넌트 외부에 선언하여 Props로 내리지 않고, 필요한 경우 컴포넌트 내부에서 직접 참조하는 것이 좋습니다.

2. 필요한 값만 분해하여 전달: 객체를 Props로 전달할 때는 필요한 값만 분해하여 전달하는 것이 좋습니다. 이렇게 하면 불필요한 리랜더링을 최소화할 수 있습니다.

3. 메모이제이션 활용: 값비싼 연산(연산 시간이 길거나 로직이 복잡한 경우) 경우 useMemo나 useCallback을 활용하여 메모이제이션을 하여 성능을 최적화할 수 있습니다. 메모이제이션은 기법은 연산 결과나 수행 로직이 메모리에 저장되어 랜더링 퍼포먼스를 최적화 할 수 있다는 장점은 있지만 메모리 공간을 사용하는 비용도 고려를 해야합니다. 또한 해당 값이 자주 재연산 되는 경우 잦은 메모이제이션이 발생함으로 프로그래밍 적으로 잘 고려해 메모이제이션을 활용해야 합니다.

Object를 Props로 전달할 때는 이러한 점들을 고려하여 효율적으로 관리하는 것이 중요합니다. 이를 통해 불필요한 리랜더링을 방지하고 성능을 최적화할 수 있습니다.