나머지 매개 변수의 주의 사항

1. 나머지 매개 변수의 주의 사항

나머지 매개변수를 사용하면 이전에 미리 설정되어 있던 속성을 덮어쓰게 된다는 것이다. 아래 영상에 대한 자세한 설명 은 여기

덮어 쓴다는 것이 기존에 있던 속성에 속성의 값이 합쳐지는 것이 아니다. 아예 값이 바뀐다.

또한 나머지 매개 변수 뿐만 아니라 속성의 이름 값이 같으면 나중에 설정된 속성이 이전에 있던 속성의 값을 덮어버린다.

2. 나머지 매개 변수의 간편함

래퍼 컴포넌트를 커스텀으로 만들어서 사용하기 위해 함수를 작성한 것이다. 이때 나머지 매개 변수를 사용하는데 아래 코드를 보면 <MessageContext.Provider />에 있는 value와 children을 한번에 가져오기 위해 {...props}를 사용해서 해당 컴포넌트의 속성을 모두 가져온다.

나머지 매개 변수는 이런 간편함으로 사용한다.

<MessageContext.Provider
  value={{
    message: this.state.message,
    changeMessage: this.changeMessage
  }}
>
  <Print>{this.state.message}</Print>
  <GrandParent parentCount={2} childrenCount={2} />
</MessageContext.Provider>

// 컨텍스트의 Provider(공급자) 컴포넌트를 래퍼 컴포넌트로 내보내기
export const MessageProvider = props => {
  return <MessageContext.Provider {...props} />;
};