JavaScript Sec 04_5 Props

Props

컴포넌트에게 데이터를 전달하는 가장 기본적인방법

---

#1. 만약 Count의 초기값을 0이 아니라, App컴포넌트에서 전달하는 값으로 하고 싶다면?

---

• 부모 컴포넌트인 App컴포넌트에서 자식 컴포넌트인 Counter 컴포넌트에게 값을 넘겨주려면 위 코드와 같이 <Counter initialValue = {5}> 라고 작성하면 된다.
  • ‘initialValue’라는 이름을 붙여 5라는 값을 전달한다.
• 부모 컴포넌트에서 자식 컴포넌트에게 이름을 붙여 값을 전달하는 방식을 Prop이라고 한다.

 

#2. 값을 여러 개 전달하고 싶으면?

---

• 이렇게 값을 여러 개 전달할 수도 있다.
• Prop이 여러 개이므로 Props라고 한다.

 

#3. 전달받은 값은 어떻게 사용할까?

---

• 부모 컴포넌트로부터 받은 값을 자식 컴포넌트가 사용하려면 인자에 ‘props’를 넣으면 된다.
  • 이 props는 객체이므로 점 표기법을 이용하여 접근한다.

 

cf) 객체의 비구조화 할당으로 값을 전달받는 방법

props 객체를 받아와서 initialValue라는 값만 꺼내쓴다.

 

#4. 전달하려는 객체가 너무 많을 때는?

새롭게 객체를 생성한 후 spread 연산자를 이용해 값을 전달한다.

 

#5. 특정 Props가 undefined으로 전달되는 경우

자식 컴포넌트에서 defaultProps를 설정해주면 전달받지 못한 props의 기본 값을 설정해서 에러를 방지할 수 있다

 

#6. 동적인 데이터 (state)를 props로 전달하는 경우

• React의 컴포넌트는 자신이 가진 state가 바뀔 때마다 리렌더가 되고
• 자신이 전달받은 props의 state가 변할 때마다 리렌더가 되고
• 자신의 부모 컴포넌트가 리렌더가 되면 자신 컴포넌트도 리렌더가 된다.

#7. 컴포넌트를 prop으로 전달하는 경우

Container 컴포넌트의 자식으로 배치된 이 요소들은 Container 컴포넌트에 children이라는 prop으로 전달이 되어 스타일이 적용된다.