Props

컴포넌트의 부모-자식 관계

컴포넌트는 다른 컴포넌트를 자신의 내부에 중첩시킬 수 있다.

• 부모 컴포넌트 : 중첩된 컴포넌트의 외부 컴포넌트
• 자식 컴포넌트 : 중첩된 컴포넌트

function Child() {
  return <div>Result</div>;	
}

function Parent() {
  return <Child />
}

function GrandParent() {
  return <Parent />
}

function App() {
  return <GrandParent />
}

---

Props

컴포넌트 간의 정보교환 방식

특징

1. 반드시 부모 → 자식 방향으로만 정보가 전달된다. (단방향)
2. 무조건 읽기 전용으로만 취급하며, 변경하지 않는다.

사용 방법

1. 부모 컴포넌트에서 전달할 정보를 return문에 입력
2. 자식 컴포넌트에서 해당 정보를 매개변수로 받음 (해당 정보는 객체 형태)

function Child({age}) {
  return <div>Parent age : {age} </div>;	
}

function Parent() {
  const parentAge = 40;
  return <Child age={parentAge}/>
}

function App() {
  return <Parent />
}

구조분해할당

Props를 가져올 때 props를 사용해도 되지만, 일반적으로 정보를 직관적으로 알 수 있도록 {age, name} 같은 형태를 사용한다.

default Props

props로 가져온 값이 정보가 없을 때 기본값으로 사용할 값을 지정한 것

function Child({name}) {
  return <div>My name is {name}.</div>
}

Child.defaultProps = {
  name: "기본 이름"
} 

Prop Drilling

부모 컴포넌트에서 자식 컴포넌트의 x3 자식 컴포넌트에 정보를 전달하려는 경우, 반드시 중간 단계의 자식 컴포넌트를 거쳐야 하는 것
(중간 단계는 해당 정보를 그저 전송하는 중간 매개체의 역할만 수행함)

export default function App() {
  return (
    <div className="App">
      <FirstComponent content="Who needs me?" />
    </div>
  );
}

function FirstComponent({ content }) {
  return (
    <div>
      <h3>I am the first component</h3>;
      <SecondComponent content={content} />|
    </div>
  );
}

function SecondComponent({ content }) {
  return (
    <div>
      <h3>I am the second component</h3>;
      <ThirdComponent content={content} />
    </div>
  );
}

function ThirdComponent({ content }) {
  return (
    <div>
      <h3>I am the third component</h3>;
      <ComponentNeedingProps content={content} />
    </div>
  );
}

function ComponentNeedingProps({ content }) {
  return <h3>{content}</h3>;
}

Props Children

<컴포넌트>와 </컴포넌트> 사이에 위치한 값을 전달하는 Props

사용 방법

{children} 또는 {props.children}을 사용

// children = "This is Children"
function Child({children}) {
  return <div>{children}</div>
}

function App() {
  return <Child>This is Children</Child>
}

용도

Layout 컴포넌트를 생성할 때 내부에 주로 사용

function App() {
  return (
    <Layout>
      <div>This is Children Part</div>
    </Layout>
  )
}