JSX에 스프레드 연산자 사용하기

Next.js 12 Page Router의 커스텀 페이지 레이아웃(getLayout)을 사용하는 것을 보며

JSX에 {...props} 식으로 모두 뿌려주는게 대강 모든 Props를 다시 주는것이겠거니하고 넘어갔다.

그러나 현재 제대로 한 번 정리할 필요가 있겠다고 생각했다.

 

1. 하위 컴포넌트에게 객체 속성 전파

아래 props라는 객체를 MyCompoent에 props로 넣는 예제이다.

const props = {
  name: 'John',
  age: 30,
  location: 'New York'
};

<MyComponent {...props} />

 

위 코드는 아래 코드와 결과적으로 같다.

<MyComponent name="John" age="30" location="New York" />

 

그래서 아래처럼 상위 컴포넌트에서 받은 props를 바로 자식 컴포넌트에 내려주는 방식으로 사용 가눙하다.

interface MyProps {
  id: 101,
  class: "A",
  name: "Bumang",
}

const MyComponent1 = (props: MyProps) => {
  return <MyComponent2 {...props} />
}

 

스프레드 연산자를 사용하여 기존 props를 다 주입한 후 새로운 props를 추가할 수도 있다.

const props = {
  name: 'John',
  age: 30
};

<MyComponent {...props} location="New York" />

 

2. 스프레드 연산자로 주입한 Props 중 일부만 바꿀 수 있다.(오버라이딩)

기존 props를 오버라이드할 수 있다. 나중에 선언된 props가 이전의 동일한 이름을 가진 props를 덮어쓴다.

const props = {
  name: 'John',
  age: 30
};

<MyComponent {...props} age={25} />

 

위 코드는 다음과 동일하다.

<MyComponent name="John" age="25" />

 

결론

JSX에서 스프레드 연산자를 사용하면 컴포넌트에 많은 props를 효율적으로 전달할 수 있다.

특히 props가 아주 많은 앱이나 그냥 하위전파만 하는 컴포넌트의 경우 props 스프레드 연산자를 통해 코드를 간결하게 관리할 수 있다.