2024.08.09

React

• props의 개념에 대해 설명할 수 있습니다.
• props를 통해 부모에서 자식으로 값을 내려줄 수 있습니다.
• prop drilling에 대해 설명할 수 있습니다.
• props의 주요 개념 중, children에 대해 설명할 수 있습니다.
• children의 용도와 렌더링 방법에 대해 설명할 수 있습니다.
• props의 추출 방법에 대해 알아봅니다.

props

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터 → 컴포넌트 간의 정보교환 방식(props)

반드시 위에서 아래 방향으로 흐른다. [전달 주체 : 부모]  → [받는 주체 : 자식] 단방향

props는 반드시 읽기 전용으로 취급하며, 변경할 수 없습니다.

 

 

props에는 객체 형태가 들어가 있습니다.

부모 컴포넌트에서 자식 컴포넌트로 내려준 `lastName`이 key: value로 들어가 있습니다.

부모에서 자식으로 어떤 데이터를 내려줄 땐 마치 HTML속성처럼 쓰면 되고,

이 속성을 자식 컴포넌트에서 사용할 땐 props라는 객체로 활용합니다.

 

`props`이름이 중요한게 아닌 위치가 중요!

 

변수를 활용해서 텍스트를 작성할 것이기 때문에 JS문법인 {}를 씁니다.

 

응용

 

 

 

 

Children

부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨주는 방법이

일반적인 props도 있지만, Children도 있습니다

 

Children의 용도

Layout 컴포넌트를 만들 때 주로 사용합니다.

 

 

props추출

 

 

 

 

자식 컴포넌트에서 타이틀을 받을 거라고 정의를 해놨는데 

부모 컴포넌트에서 자식 컴포넌트를 호출하고 타이틀을 안 보냈다 가정해봅니다. 

저장해보면 아무것도 나오지 않습니다.

그런 경우를 대비해 props의 기초값을 셋팅할 수 있습니다.

만약 들어오지 않은 경우라면 Default  프로퍼티로 "미제출"값이 세팅 됩니다.

타이틀을 부모 컴포넌트에서 내려주는 순간 값이 다시 변경됩니다.

 

 

→ 부모로부터 자식에게 값을 내려줄 때 props를 사용합니다.

     props를 내려갔을 때 자식 컴포넌트에서는 하나의 객체로  그 props에 담긴 모든 값들을 받습니다. (children도 포함)

     `props.`을 여러번 사용하기보다 구조 분해 할당으로 props를 찢어 변수로 활용할 수 있습니다..

     이 변수가 만약 부모 컴포넌트로 부터 세팅이 안 되어 있을 경우 Default Argument를 이용해 방지할 수 있습니다.