[React] props와 children

props

: 컴포넌트 끼리의 정보 교환 방식

 

특징

1) 위에서 아래 방향(부모 → 자식 방향)으로만 흐른다. (단방향)

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

 

children

props와 유사하게 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전송할 수 있는 방법

여는 태그와 닫는 태그 사이에 작성된 값이 자식 컴포넌트의 children이라는 값으로 전달된다.

 

import React from "react";

const App = () => {
  return <User>안녕하세요!</User>;
};

function User(props) {
  return <div>유저님 {props.children}</div>;
}

export default App;

 

children의 용도

1) 레이아웃 컴포넌트를 만들 때 주로 사용

import React from "react";

const App = () => {
  return (
    <Layout>
      <div>레이아웃 내부에 들어갈 요소들</div>
    </Layout>
  );
};

function Layout(props) {
  return (
    <main>
      <header>header입니다.</header>
      {props.children}
      <footer>footer입니다.</footer>
    </main>
  );
}

export default App;

 

 

구조분해할당 활용하기

import React from "react";

const App = () => {
  return (
    <Layout>
      <div>레이아웃 내부에 들어갈 요소들</div>
    </Layout>
  );
};

function Layout({ children }) {
  return (
    <main>
      <header>header입니다.</header>
      {children}
      <footer>footer입니다.</footer>
    </main>
  );
}

export default App;

위는 같은 결과다!

Layout의 파라미터로 props가 전달됨

따라서 {children} = props 와 같은 의미

props 는 key-value 쌍이므로 현재 children이라는 키의 값인 <div> ~ 내용이 children에 할당된다.

 

기본값 설정

그런데 부모 컴포넌트에서 아무값도 보내주지 않았을수도 있다. 그를 위해 기본값을 설정해둘 수 있다.

function Layout({ children = "default" }) {
  return (
    <main>
      <header>header입니다.</header>
      {children}
      <footer>footer입니다.</footer>
    </main>
  );
}