[React] 속성 전달

 >> 리액트는 반드시 부모 컴포넌트에서 직계 자식 컴포넌트로만 속성이 내려가게 하는 연쇄적인 명령 실행만 가능하다. 

속성을 전달할 때 중간 계층을 건너 뛸 수 없다는 의미이며, 또한 자식으로부터 부모로 속성을 거꾸로 올려보낼수 없다.

속성은 1개씩 타고 내려가며, root로 부터 color = "red" 가 들어가게 되면 한칸 단계씩 옴겨져야 한다

color = {this.props.color} ~~ 만약 보내야 속성이 1개가 아닌 n개 가 된다면 어떻게 될까?

 

예제를 통해서 알아보자

ReactDOM.render() 에서 정의된 값이 각 컴포넌트들에게 전달되어 마지막에 있는 곳에서 Display 컴포넌트에서 값을 표시하였다. 즉 목적지를 향하는 경로에 있는 모든 컴포넌트들이 각 속성에 접근하고 재정의해 전달하는 것이다.

Shirt -> Label -> Display 모든 컴포넌트들에게 전달 및 재정의 하여 재전달된다.

 

>> 이 문제의 해결은 최근 자바스크립트 표준에 포함된 스프레드 연산자에 있다.

 - items 배열에 있는 세 개의 값을 printStuff 함수에 인자로 넘겨 호출하고자 한다.

var items = ["1","2","3"]

function printStuff(a,b,c){
	console.log( "Printing : " + a + " " + b + " " + c);
}

printStuff( itmes[0], items[1], items[2])  매우간단하다

 하지만  스프레드 연산자를 사용하면 더 쉬워진다. 

printStuff(...items); 

>> items 앞에 있는 "..." 가 스프레드 연산자이다. 즉 ...items 라고 하면   itmes[0], items[1], items[2]와 동일한 의미이다.

즉 . 스프레드 연산자는 배열 안의 개별 요소를 밖으로 풀어내는 역할을 한다.

 

컴포넌트에 걸쳐 속성을 전달하는 문제는 배열의 각 아이템에 일일이 접근하는 문제와 매우 유사하다.

컴포넌트 안의 props 객체는 다음과 같은 모습이다.

var props = {
	color : "steelblue",
    num : "3.14",
    size : "medium"
}

이들 속성 값을 자식 컴포넌트에 전달하려면 다음과 같이 props 객체의 각 아이템에 일일이 접근해야 한다.
<Display color={this.props.color} num={this.props.num} size={this.props.size} />

스프레드 연산자를 사용해 배열을 풀수 있듯이, 속성과 값 쌍을 전달할수 있다면 좋지 않을까
방법이 있다.

...props를 사용해 Display 컴포넌트를 호출할 수 있다.

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

 

스프레드 연산자를 통해서 표현해도 동일한 결과가 출력된다.