React_Props

#Props 

 

Props는 컴포넌트의 속성을 설정할 때 사용하고 어느 특정 값을 전달할때 사용합니다. props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 할수 있습니다. 

 

props는 상위 컴포넌트에서 하위 컴포넌트로 전달하는 개념이며, 하위 컴포넌트에서 상위 컴포넌트에 값을 전달 할수 없습니다.

 

※ props는

상위 컴포넌트 → 하위 컴포넌트 ( ㅇ )

하위 컴포넌트 → 상위 컴포넌트 (  x  )

---

#props 기본 사용방법

예를 들어 App 컴포넌트에 Joycoding 컴포넌트를 사용 할 때 name 이라는 값을 전달해주고 싶다고 가정해보고 코드를 작성해 봅시다!!

 

App.js

 

이때 Joycoding 컴포넌트에서 name의 값을 쓰려면 어떻게 쓰면 될까요 ? 아래 코드를 봅시다

 

Joycoding.js

 

컴포넌트에게 전달되는 props는 피라미터를 통해 조회 할 수 있습니다. props는 객체 형태로 전달 되고 만약 위와 같이 name 값을 조회 하고 싶다면 prop.name을 조회하면 됩니다.

---

#props 비구조화 할당 (여러개일 경우)

Joycoding 컴포넌트에 다른 props를 전달하기 위해 color 라는 값을 성정해 보겠습니다.

 

App.js

 

그다음에는 Joycoding 컴포넌트에서 color 값을 조회해서 폰트의 색상을 설정해 봅시다!

 

Joycoding.js

 

위와 같이 prob 내부의 값을 조회 할때바다 prob. 을 입력하고 있습니다. 이렇게 하면 나중에 probs를 추가할때마다 코드의 줄이 길어지고 복잡해집니다. 이러한 문제를 해결하기 위해 비구조화 할당 즉 구조 분해 할당을 통해서 코드를 좀 더 간결하게 작성 할 수 있습니다.

 

Joycoding.js

 

객체 형식으로 가져올 props를 넣어주면 됩니다. 주의 할점은 스타일은 중괄호를{ } 하나 더 써줘야 됩니다! 추가적으로 배경색을 가져오려면 어떻게 하면 될까요 ? 간다합니다. App컴포넌트에 배경색을 추가하고 Joycoding 컴포넌트에 위 와같이 배경만 추가하면 됩니다.

 

App.js

Joycoding.js

---

#props.children

props.children은 태그사이에 있는 내용을 보여줍니다. 위에 있는 내용을 바탕으로 props.children을 사용하는 새로운 컴포넌트를 만들겠습니다.

Wrapcontents.js

 

위와 같이 Wrapcontents 컴포넌트를 만들어주고 매개변수(probs)에 객체형태로 children을 넣어줍니다. 또한 랜더링 할 리턴 값에도 같이 넣어 줍시다!

 

App.js

 

렌더링 값에 <div> 대신에 <Wrapcontents> 컴포넌트 태그로 감싸 주면 위와 같은 화면이 출력됩니다!