[React] props(1) : 컴포넌트 간의 정보 교환

 

 

💡 props 는 반드시 위에서 아래 방향으로 흐른다. 부모 ➡️ 자식 (단방향)
💡 props 는 반드시 읽기 전용으로 취급하며, 변경하지 않는다!

 

import React from "react";

function Son() {
  return <div>나는 아들이야!</div>;
}

function Mom() {
  const name ="사모님";
  return <Son />;
}

function Grandfa() {
  return <Mom />;
}

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

 

Mom 의  name 을 Son 에서 쓰고 싶다면?

props 로 값을 전달한다!

 

import React from "react";

function Son(props) {
  console.log(props); // {motherName: '사모님'}
  console.log(props.motherName); // "사모님"
  return <div>나는 {props.motherName} 아들이야!</div>;
}

function Mom() {
  const name = "사모님";
  return (
    <div>
      <Son motherName={name} /> {/*Son 에게 props 전달*/}
    </div>
  );
}

function Grandfa() {
  return <Mom />;
}

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

 

Son 에서 받은 props 는 오브젝트 로 들어오게 된다.

 

 

👀 그럼 할아버지의 이름을 추가하고 Son 에서 받아보자!

import React from "react";

function Son(props) {
  console.log(props); // {motherName: '사모님', granfaName: '회장님'}
  return (
    <div>
      나는 {props.granfaName} 의 손자고 {props.motherName} 아들이야!
    </div>
  );
}

function Mom(props) {
  console.log(props); // {granfaName: '회장님'}
  const granfaName = props.granfaName;
  const name = "사모님";
  return (
    <div>
      나는 {props.granfaName} 의 딸이야
      <Son motherName={name} granfaName={granfaName} /> {/*Son 에게 props 전달*/}
    </div>
  );
}

function Grandfa() {
  const name = "회장님";
  return (
    <div>
      나는 {name}이야
      <Mom granfaName={name} /> {/*Mom 에게 props 전달*/}
    </div>
  );
}

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

GrandFa 의 name 을 Mom 에게 전달하고 Mom 은 다시 Son 에게 전달한다.

 

 

❗️ Props Drilling

그런데 이런식으로 전달하다 보면 전달만 하는 컴포넌트가 생기게 된다! Mom같은 ..

이런식으로 하위의 하위로 계속 전달하는걸 프롭스 드릴링 이라고 한다.

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>;
}

 

이를 피하기 위한 Redux 와 같은 데이터 상태관리 툴이 있다고 한다. 나중에 다시 내용을 추가하자!