Props

Props : 

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터.
-> 컴포넌트 간의 정보 교류 방법

 

1. props는 반드시 위에서 아래 방향. 즉, [부모] -> [자식] (단방향)

2. props는 반드시 읽기 전용으로 취급하며, 변경 x

 

props 란 결국 부모 컴포넌트가 자식에게 넘겨준 데이터들의 묶음

 

prop drilling

[부모] -> [자식] -> [그 자식] -> [그 자식의 자식]

3번이나 데이터를 내려줘야 함. 이걸 아래로 뚫고 간다 해서 drilling

이와 같은 패턴을 피하기 위해 Redux 와 같은 데이터 상태관리 툴을 배워야 함

---

Props Children

자식 컴포넌트로 정보를 전달하는 또 다른 방법. 얘도 props 임

 

용도 :

Layout 컴포넌트를 만들 때 자주 사용

 

Layout 컴포넌트 안에는 header 라는 컴포넌트가 있고, header 아래에

{props.children} 를 통해서 props를 받아 렌더링 하고 있다.

즉, Layout 컴포넌트가 쓰여지는 모든 곳에서 <Layout>...</ Layout> 안에 있는 정보를 받아서 가져올 수 있다

 

---

Props 추출

 

props. 대신에 짧게 쓰는 방법 -> JS의 구조 분해 할당

function Todo({ title }){
	return <div>{title}</div>
}

 

 

Default Argument

매개변수가 지정되지 않았으면 자동으로 지정해줄 값을 정하라는 의미