React Props

React Props

---

1. 정보교환 방식

Component의 정보 교환 방식으로 부모 자식 관계
즉 부모 컴포넌트가 자식 컴포넌트에게 물려주는 데이터 교환 방식이다.

• 데이터를 넘겨주기 위해 자식 Component 매게변수로 props를 넣어준다.
• 데이터는 Object 형식 으로 넘어가기 때문에 Key = value로 보내진다.
• 아래의 value 중괄호{}는 함수를 넣어줬기 때문
• 자식 Component에서 props.key로 value를 불러온다.

// src/App.js

import React from "react";

function Child(props) {
  return <div>{props.grandFatherName}</div>;
}

function Mother(props) {
  return <Child grandFatherName={props.grandFatherName} />;
}

function GrandFather() {
  const name = "chunSam";
  return <Mother grandFatherName={name} />;
}

function App() {
  return <GrandFather />;
}

export default App;

2. props drilling

부모에서 보내는 데이터가 거치는 자식이 많아질 수록 데이터가 흘러가는 형태가
뚫고 들어가는 drill과 닮아 있어 이것을 drilling이라 말한다.
후에 ‘Redux’와 같은 데이터 상태관리 툴을 이용 해결한다.

3. Props Children

props 방법으로 기존의 props가 keyName을 지정해서 값을 보냈다면은 Props Children은 keyName이 children으로 자동 지정된다.

• 다른 파일에 있는 자식 컴포넌트에 값을 전달하는데 특화됐다.
• import로 자식 컴포넌트가 있는 파일을 받아준다.
• tag형식으로 자식컴포넌트 name을 쓰고 보낼 데이터를 넣어준다.
• 자식 컴포넌트는 기존 props와 동일하게 매게변수에 props를 넣어준다.

// src/About.js

import React from "react";
import Layout from "./components/Layout";

function App() {
  return (

    <Layout> 
      <div>여긴 App의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default App;

4. Props 추출