React 컴포넌트의 Props override에 대하여

export default function WrapperComponent({props}: PropsType) {
  const newPropOne = "New Prop One";
  
  <SomeComponent propOne={newPropOne} {...props} />
}

위와 같은 코드가 있다면, SomeComponent는 어떤 props를 받게 될까?

만약 props가 아래와 같이 구성되어 있다면,

const props = {
	propOne: 'Prop One',
  	propTwo: 'Prop Two',
  	propThree: 'Prop Three'
  	...
}

props의 propOne은 선행한 newPropOne에 의해 override 된다. 그러므로 SomeComponent가 받을 props는 아래와 같이 변경된다.

const props = {
	propOne: 'New Prop One',
  	propTwo: 'Prop Two',
  	propThree: 'Prop Three'
  	...
}

다만, SomeComponent를 사용할 때, 아래와 같이 사용한다면 override가 되지 않는다.

<SomeComponent {...props} propOne={newPropOne} />

override할 prop이 선행하도록 코드를 작성해야 한다.