[React] 부모-자식 컴포넌트/ props/ prop drilling

props 

컴포넌트 끼리의 정보 교환 방식으로, 부모 컴포넌트가 자식 컴포넌트에 물려준 데이터를 뜻한다. 

1. 컴포넌트는 아래에서 위 방향으로 흐른다. [부모] -> [자식] 으로만 (단방향)

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

 

컴포넌트의 속성을 props 라고 하며, 이는 파라미터를 통해 부모에서 자식으로 전달해줄 수 있다.

import React from "react";

// props 를 통해 부모 -> 자식 데이터가 전달된다.
function Son(props) {
  console.log(props);
  return (
    <div>
      나는 {props.motherName}아들이고, {props.grandFatherName}의 손자입니다.
    </div>
  );
}

// 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달
function Mother(props) {
  const name = "봉미선";
  const grandfatherName = props.grandFatherName;
  return <Son motherName={name} grandFatherName={grandfatherName} />;
}

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

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

 

console.log(props)를 찍어보면 

객체 형태로 props 에 데이터가 잘 전달 된 것을 확인할 수 있다.

 

---

prop drilling

위처럼, [할아버지]->[부모]->[자식] 으로 데이터를 전달하면서 props 가 아래로 뚫고 내려가는 현상을 prop drilling 이라고 한다.

그러나 위의 [엄마] 컴포넌트처럼 필요없는 데이터를 전달하게 되면 유지보수 측면에서 좋지 않음. (실제 렌더링 하는건 자식 컴포넌트)