2023-02-04(props실습)

✅✅props는 부->자로서 단방향이다. 하지만 깊게 생각해보면 자식의 정보를 받아서 화면에 보여주는 것처럼 보일 수가 있다. 이렇게 생각하자. 자식의 모든 정보는 원래 부모에 있었고 부모가 자식에게 넘겨주고 넘겨줌으로써 자식은 그것을 ui에 그린다!! 까지만..

우선 실습을 시작하기 앞서 props에대해서 아시겠지만 간단히 설명 하고 시작하겠습니다.

• props란
  기존에 방식(자식->부모)와 반대로 (부모->자식)컴포넌트에게 물려준 데이터를 말한다. 컴포넌트간의 정보교류 방법.

  특징1. 반드시 위에서 아래 방향 (부모->자식)으로 흐르는 단방향
   특징2. Props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

• props의 전달과정 (props로 받은 값을 화면에 렌더링하기)
  

1. 할아버지 커모넌트가 엄마 컴포넌트에게 줄 data를 만든다.
2. 그 만든 data를 엄마에게 전달하고 엄마는 props에 받는다
3. 엄마 컴포넌트는 할아버지 컴포넌트에서 받은 data를 변수로 만든다.
4. 그 만든 변수를 아들 컴포넌트에게 보낼 양식으로 만든다
5. 그 양식data를 아들 props에서 받는다.
6. 아들 props는 div로 최상위 컴포넌트의 data를 읽는다

• props drilling
  (부모->자식->그자식->그자식의그자식)
  --> 결국 (최상위 컴포넌트->최하위 컴포넌트)로 전달하는 것이고 중간에 중간다리 역할들은 정보 전달만 하는 꼴이다 이런 아래로 뚫고 내려간다.라고해서 props drilling이다. 이건 redux에서 데이터 상태관리를 통해 이 패턴을 피할 수 있다고 한다.
  (그림 예제에서는 아래에서 위로 표현했지만 위에서 아래가 맞음)
  

---

child컴포넌트
상위 컴포넌트에 여는 tag 닫는 tag사이에 어떤 값을 둔다면 children으로써 인식이 된다. 그러면 자동적을 children이라는 값을 가지고 있다.

funtion App() {
	return <User>안녕하세요<User />;
 }
 
function User (props) {
console.log("props", props)
	return <div>{props.children}<div />

이것이children문법
용도 : layout컴포넌트를 만들 때 자주 사용