문제

<aside> 💡 기본값으로 지정한 options 객체에 size, color 속성을 모두 유지해야 하는 상황

</aside>

컴포넌트 특정 Prop의 기본값을 객체로 지정하고, 컴포넌트를 사용하는 곳에서 객체를 넘기면 기본값으로 지정한 객체를 덮어쓴다. 아래 예시에선 options 프롭에 size color 속성을 갖는 객체를 기본값으로 지정했지만 컴포넌트를 사용하는 곳에서 size 속성만 갖는 객체를 넘기므로 options 프롭은 { size: 5 }가 된다.

// 컴포넌트 정의
function Child({ options = { size: 100, color: 'black' } }) {
	// options 프롭 기본값을 { size: 100, color: 'black' } 으로 설정
}

// 컴포넌트 사용
return <Child options={{ size: 5 }} />;
// 프롭 넘긴 후 options → { size: 5 }
// { size: 5 } 객체가 기본값으로 지정한 { size: 100, color: 'black' } 객체를 덮어씀

해결

방법 1

기본값으로 설정할 객체 속성을 미리 정의해두고 그 외 속성에 전개 연산자(Spread Syntax)를 사용하면, 프롭으로 받은 객체 속성만 덮어쓰고 나머진 그대로 유지할 수 있다. 아래 예시에선 size 속성만 갖는 options 프롭을 받았으므로 size 속성값만 5로 덮어쓰고, color: 'black' 속성값은 그대로 유지한다.

// 컴포넌트 정의
function Child({ options }) { 
	const defaultOptions = { size: 100, color: 'black', ...options };
}

// 컴포넌트 사용
return <Child options={{ size: 5 }} />
// 프롭 넘긴 후 defaultOptions -> { size: 5, color: 'black' }
// 기본값으로 지정한 color 속성은 유지하고 프롭으로 넘긴 size 속성만 변경됨

방법 2

각 속성을 개별적으로 사용해야 한다면 구조 분해 할당하는 변수에 기본값을 지정하는 방법을 활용할 수 있다. 변수에 기본값을 지정해두면 분해한 값이 undefined일 때 기본값을 사용한다. 예를들어 프롭으로 넘긴 options 객체에 color 속성이 없다면, color 변수에 기본값으로 지정한 black이 할당된다.

// 컴포넌트 정의
function Child({ options }) { 
	const { size = 100, color = 'black', ...rest } = options
	console.log(size, color, rest) // 5, 'black', {}
}

// 컴포넌트 사용
return <Child options={{ size: 5 }} />