속성 전달

속성 전달

리액트는 원하는 컴포넌트로 속성을 바로 전달하는 일은 불가능하다. 리액트는 반드시 부모 컴포넌트에서 직계 자식 컴포넌트로만 속성이 내려가도록 하는 연쇄적인 실행만 가능하다. 하지만 속성을 일일이 전달하게되면 전달해야될 속성의 숫자가 늘어날수록 확장성도 없고, 유지보수도 어렵게 된다.

스프레드 연산자

자바스크립트의 스프레드 연산자가 하는 역할 중 배연 안의 개별 요소를 밖으로 풀어내는 역할을 이용해서 리액트의 속성전달 문제를 해결한다.

컴포넌트에 전달하는 속성이 아래와 같다.

var props = {
  colro: "blue",
  num: "3.14",
  size: "large"
}

이 속성을 스프레드 연사자를 사용하지 않고 자식 컴포넌트에 전달하기 위해서는 아래와 같을 것이다.

<Display color={this.props.color}
        num={this.props.num}
        size={this.props.size}/>

이를 스프레드 연산자를 이용하면 아래와 같이 간단하게 작성할 수 있다.

<Display {...this.props}/>

ES2015에서 스프레드 연산자는 배열이나 Symbol.iterator속성을 가진 객체에 대해서만 작동하게 설계되었지만, 리액트에서 표준이 확장되서 props와 같은 객체에서 사용할 수 있다. 그렇기 때문에 지원이되지 않는 브라우저에서 그냥 사용할 수 없지만, 바벨을 사용해서 JSX를 브라우저가 이해할 수 있도록 변환하기 때문에 사용이 가능하다.