(React) 리액트 기초 1. Props / Props children

1. props란 ? 
부모 → 자식 (단방향) 컴포넌트 간의 데이터 교류 방식. 읽기전용이므로 변경되지 않는다.

 

2. 기본 props 예시
부모 App → 자식 Mydoggy에 name이라는 데이터를 전달하려고 한다.

  import React from "react";

  function App() {

    const name = "다람이";

    return <MyDoggy A={name} />;

  }

  function MyDoggy(props) {

    //  console.log(props);

    return <div>강아지 이름은 {props.A}</div>;

  }

  export default App;

(1) react snippet 확장팩을 다운로드 받고, rfce 탭을 입력한다. 자동으로 import ~ export 뼈대가 잡혀 편리!

(2) 부모 컴포넌트 App()을 먼저 작성한다. 참고로 컴포넌트명의 첫번째 글자는 무조건 대문자여야 한다. 

자식에게 전달하고자 하는 데이터를 변수 name을 선언 해준 뒤 문자열 "다람이"를 할당해준다.
return <자식컴포넌트이름/> 이런 방식으로 자식 컴포넌트를 호출하는데, props를 호출하고자 한다면 이때
return <자식컴포넌트이름 props이름={변수이름}/> 방식으로 작성한다.

예시에서는 App컴포넌트가 MyDoggy컴포넌트로 A라는 이름의 props를 전달하고 있는데,
이 props A에는 name이라는 변수가 들어있고, name에는 "다람이"가 들어있는 구조다. 

(3) 그 다음 자식 컴포넌트 MyDoggy를 작성한다.
props를 통해 화면에 렌더링해줄 자식 컴포넌트는 props를 매개변수로 가져야 한다.

function Mydoggy(props) {
return <div> {props.props이름} </div>
}

 

2. Props children 예시

<App.js>

  import React from "react";

  import Layout from "./Layout";

  function App() {

    return (

      <Layout>

        <div style={{ margin: "10px" }}>App에서 작성한 글입니다.</div>

      </Layout>

    );

  }

  export default App;

<Layout.js>

  import React from "react";

  function Layout(props) {

    return (

      <>

        <header

          style={{

            margin: "10px",

            border: "3px solid red",

            fontFamily: "serif",

          }}

        >

          항상 출력되는 Layout : 머리말입니다.

        </header>

        {props.children}

      </>

    );

  }

  export default Layout;

(1) props children은 위의 예시처럼 주로 Layout 컴포넌트를 만들 때 사용된다. 

부모 컴포넌트 App에서 호출할 자식 컴포넌트 Layout을 작성한다.
function Layout은 props를 매개변수로 받고, <header (css요소)>태그로 구성했다. 
빈태그로 감싼 뒤 안에서 {props.children}으로 호출받을 준비를 한다.
App컴포넌트에서 전달받은 <div>요소를 렌더링하고, <header>와 함께 출력된다. 

App컴포넌트에서 Layout컴포넌트를 호출하기 위해서 import Layout을 한 뒤, <Layout>태그를 리턴한다. 

 

(2) props children의 특징 두 가지

- 재사용성 : 부모 컴포에서 자식 컴포에 포함될 내용을 '동적'으로 결정해서 유연하게 재사용 할 수 있다.
- 중첩 컴포넌트 구조 : 부모 컴포에서 여러개의 자식 컴포를 중첩해서 사용할 수 있다.