React props

props = 컴포넌트끼리 정보/데이터 교환 방식= 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터

 

<props 주요특성>

1. props는 반드시 부모에서 자식으로만 흐른다. 

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

 

< drilling 예제>

function Child(props){
  return<div>내가{props.GrandFa2} 손자다</div>
}

function Parents(props){
  // console.log("props", props.GrandFaName) 확인
const GrandFa = props.GrandFaName;
  return<Child GrandFa2= {GrandFa}/>
}

function GrandFa(){
  const name = "할아버지"
  return <Parents GrandFaName = {name}/>
}

function App(){
  return <GrandFa/>
}

위 예제로 보면 GrandFa의 정보를 son에 전달하기 위해 Parents를 통하게 되는데 여기서 parents는 그저 전달하는 역할만 하게 되는데 만약에 그 자식의 자식 자식의 자식 이런식으로 4개 밑의 자식한테 정보를 주려면 중간에 껴있는 3개의 자식들에게 전부 전달을 거쳐야 한다.  이것이 prop drilling 이라고 한다.

 

<props Children>

children을 쓰는 이유는 뭘까 

function Layout(props) {
  return (
    <>{/* 전체를 묶는 최상위 태그가 하나 있어야해요*/}
    <header>
      이건 모든 페이지에서 보일거에요.
    </header>
    {props.children} {/* <Layout 여기나> 여기에 들어간 값이 보일거에요</Layout> */}
    </>
    
  )
}

layout컴퍼넌트에서 항상 props의children을 가지고 있다고 한다면 import layout과  <layout>props에 들어갈 내용</layout>으로 여러페이지에 layout컴퍼넌트만으로 헤더를 모두 보여지게 할 수 있습니다. 

 

계속 새로운 컴퍼넌트를 생성할 필요없이 layout이라는 컴퍼넌트 하나로 모든 페이지에 넣을 수 있으니 좋겠죠?

 

<props 추출>

props의 값을 사용하려면 항상 props.가져올것 이렇게 써야했는데 가져올 애들을 구조분해할당을 해서 그key들을 props위치에 넣어주면 무엇이 있는지 바로 알 수도 있고 props를 생략하고 key만 써도 되겠죠?