React] Hook : props

Props

properties의 줄임말로, Component가 가지고 있는 속성값입니다. (HTML에서의 attribute와 같음)

Component끼리 (부모 컴포넌트 → 자식 컴포넌트) 데이터를 전달할 수 있게 해 줍니다.

 

기본적으로는 부모에서만 props의 값을 변경할 수 있지만, 자식에서 값을 부모로 넘겨 부모에서의 값도 바꿀 수 있습니다.

 

 

---

 

 

예

 

값 전달

• Title 컴포넌트
  HelloWorld에서 language를 kor로 하여 Title컴포넌트에 props로 넘기게 됩니다.
• Title2 컴포넌트
  HelloWorld에서 language와 name 두 가지 props를 전달하였고,
  Title2에서는 구조분해할당으로 language(변수), name(콜백함수) 값을 받았습니다.
  Title2에서 name에 "왕가"라는 값을 넣어주게 되고, 콜백함수가 실행되어 console.log에 "왕가"를 찍히게 됩니다.

 

 

태그 전달

• Title3 컴포넌트
  변수와 함수뿐만 아니라 태그를 전달하여 활용할 수 있다.
  Title3 컴포넌트를 보게 되면 부모 컴포넌트인 HelloWorld에서 p태그 2개를 Title3 태그 안에 품게 되며,
  Title3에서는 해당 태그를 children으로 받아서 활용할 수 있다.

 

 

 

---

 

 

부모컴포넌트와 자식컴포넌트사이에는 태그, 값, 함수 등 다양한 데이터를 서로 주고받을 수 있습니다.