💻오늘 배운 내용

👩🏼‍💻props

🐥 props란?

컴포넌트 끼리의 정보 교환 방식,
부모컴포넌트에서 -> 자식 컴포넌트로만 물려줄 수 있다.

props를 사용하여 자식 컴포넌트로 전달하기

부모 컴포넌트에서 motherName을 지정하여 Son으로 내려주었음

GrandFatehr컴포넌트에서 - Mother - Son으로 전달하였음
1. GrandFather에서 name 지정 하여 return문을 통해 하위 컴포넌트로 전달
2. Mother 에서 GrandFather의 name 확인하는방법
파라미터에 props를 넣고 console.log(props.granName);=> GrandFather에서 name을 콘솔창에 보여줌
( 이때 1에서 return문에서 Mother컴포넌트로 전달할때 사용한 이름으로 써야함

const name = "단군할아버지";
  return <Mother grandName={name} 

function Mother(props) {
  console.log(props.grandName);
  const grName = props.grandName;
  return <Son grName={grName} />;
}

🐥 prop drilling

[부모] → [자식] → [그 자식] → [그 자식의 자식] 이 데이터를 받기 위해선 무려 3번이나 데이터를 내려줘야 함 이걸 바로 prop drilling, props가 아래로 뚫고 내려간다. 라고 합니다.

이를 이를 피하기 위해 ‘Redux’같은 데이터 상태관리 툴이 필요함

🐥children props (props의 단점)

태그 안에 props를 넣을 경우 , 상위 컴포넌트에서 하위 컴포넌트로 props를 내려줄 때 children으로 확인됨

따라서

//하위 컴포넌트
function User(props) {

  return <div>{props.children}</div>;
}

으로 입력하면 상위 컴포넌트에서 내려준 값을 받을 수 있음

예시)

App.js (상위 컴포넌트) 에서 입력한 값을 Layout 컴포넌트에서 담을 수 있도록 해준다