[React] Props

자바스크립트에서 태그 하나를 DOM이라고 한다.

그리고 DOM은 각 각 가지고 가지고  있는 속성을 Property라고 한다.

 

그런  propety 들이 모여있는 것을 가지고 온것을 Props라고 한다.

 

그래서 props는 태그가 가지고 있는 속성을 이야기한다.

 

그럼 props를 어떻게 보내고 가지고 올까?

 

그림으로 먼저 살펴 보자

 

A라는 사람의 정보를 컨테이너에서 컴포넌트로 보낸다고 생각해보자

 

 

그리고 B라는 사람이 있다고 생각해보자. 

그럼 컴포넌트를 만들어서

또 정보를 바꿔서 보내줘야한다.

또 C라는 사람이 있다면?

 

그래서 차라리 정보를 변수로 전달하는 것이다.

 

만약에 홍길동이 값이 들어 왔을 때

변수가 인식해서 사용자에게 값만 바꿔서 전달하는 것이다.

 

컴포넌트는 재사용하고 값이 들어온 것을 그대로 보여주자는 것이다.\

그래서 컨테이너에서 컴포넌트로 값을 전달해서 보여주는 방식이다.

 

그럼 실제로 만들어보자.

---

 

일단 컨테이너 하나와 컴포넌트 하나를 만들어준다.

 

 

태그에서 속성을 전달할 때 처럼 변수를 전달한다.

 

그리고  컴포넌트에서 받을 때는

 

 

매개변수로 전달 받는다.

그러면 컨테이너에서 전달했던 속성들이 props라는 매개변수에 담겨져서 온다.

 

값이 어떻게 들어오는지 눈으로 확인해 보자.

 

 

 

그러면 Object, 객체로 오는 것을 확인 할 수 있다.

 

key와 value로 전달이 된다.

 

그럼 어떻게 써야할까

 

props.name으로 받으면  값을 받으면 된다.

 

스타일도 보내보자

 

 

보낸 속성이 어떻게 왔는지 확인해 보면

 

태그에 스타일 속성을 적용해서 써보면

 

색이 잘 변해 있는 것을 확인 할 수 있다.