[React] Props란, Props Children

🛫 Props란?

- 프로퍼티, props(properties의 줄임말)

- 부모 컴포넌트에서 자식 컴포넌트에게 물려준 데이터, 즉 컴포넌트간의 정보 교류 방식

- props는 반드시 위에서 아래(부모에서 자식)방향으로만 흐른다(단방향 메커니즘)

- props는 반드시 읽기 전용이며, 자식 컴포넌트에선 변경할 수 없다.

 

 

🛫 Props로 값 전달

props는 부모 컴포넌트가 자식컴포넌트에게 넘겨준 데이터들의 묶음
props는 object literal 형태 - {key: "value"} 데이터 형태

//App.js

import React from "react";

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

function Mother() {
	const name = '홍부인';
  return <Child motherName={name} />; // 💡props로 name을 전달
}

function Child(props) {	// 자식 컴포넌트에서 props값 받기
  return <div>나는 {props.motherName}의 아들입니다!</div>;
}

export default App;

Mother컴포넌트에서 Son에게 name을 motherName으로 Child컴포넌트에 전달해주고 있다. 

Mother가 보내준 정보(motherName)는 Child컴포넌트에 객체 형태로 전달이 되고,

따라서 해당 객체의 MotherName이라는 key값을 찾아서 화면에 렌더링할 수 있다.

Mother가 Child로 내려준 정보(props)는 객체 형태이다

 

🛫 Props Children

• 부모에서 자식 컴포넌트로 데이터를 전달하는 또 하나의 방법

import React from "react";

function App() {
  return <User>안녕하세요</User>;	//props children으로 데이터 전달
}

function User(props) {
  return <div>{props.children}</div>;	// 저식컴포넌트에서 children값 받기
}

export default App;

기존의 props와 달리 부모 컴포넌트에서 호출하는 자식 컴포넌트 태그 사이에 전달할 데이터를 입력하는 방법이

props Children이다. 

위에서의 props와 다른 점은 key값이 children으로 지정된다는 것이다. 

 

• children의 용도

👉 Layout 컴포넌트 만들 때 자주 사용

//About.js

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

function App() {
  return (

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

Layout의 props로 “여긴 App의 컨텐츠가 들어갑니다.” 라는 문자열이 전달된다.

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

function Layout(props) {
  return (
    <>
      <header
        style={{
          margin: "10px",
          border: "1px solid red",
        }}
      >
        이건 모든 페이지에서 보이는 헤더 입니다.
      </header>
      {props.children}
    </>
  );
}

export default Layout;

Layout 컴포넌트 안에는 header 라는 컴포넌트가 있고, header 아래에 {props.children} 를 통해서 props를 받아 렌더링 하고 있다. 즉, Layout 컴포넌트가 쓰여지는 모든 곳에서 <Layout>…</Layout> 안에 있는 정보를 받아서 가져올 수 있다!

따라서, header 컴포넌트를 Layout 컴포넌트에서 한번만 작성하면 여러 페이지에서 모두 보여지게 하는 것이 가능하다

리액트 앱 실행 결과

 

🛫 prop drilling

[부모] → [자식] → [그 자식] → [그 자식의 자식] 이 데이터를 받기 위해서는 부모가 자식에게, 자식은 그걸 다시 자신의 자식에게, 그 자식의 자식은 또 본인의 자식에게 데이터를 전달해주어야한다. 이처럼 중간에 있는 자식들은 그저 데이터를 전달해주는 역할만 하게 된다. 이런 경우를 prop drilling이라고 한다.

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 갑 추출

• 구조분해할당: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

// App.js

import React from "react";
import Child from "Child";

function App(){
const name="test";

return <Child age={22}name={name}>이름</Child>

이를 원래대로 Child에서 props로 데이터를 받게되면 {age: 22, name: 'test', children: '이름'}으로 받게된다.

구조분해할당을 이용하게 되면 훨씬 간단하고 부모 컴포넌트로 부터 어떤 props를  받아왔는지 명시적으로 확인이 가능!!

//Child.js

import React from "react";

function Child({age, name, children}) {
<div> Child </div>
}

export default Child;