Props

Props란?

컴포넌트 끼리의 정보교환 방식
👉 데이터를 교환하는 방식 중 하나 !

✋ 반드시 기억!

1. Props는 반드시 위에서 아래 방향으로 흐른다.
   [부모] => [자식] 단방향으로만 흐른다.
   거꾸로는 안됨 !!
2. 반드시 읽기 전용으로만 취급하고, 변경하지 않는다.

---

일단 연습 코드를 통해 살펴보자.

import React from "react";

function Son() {
  return <div>저는 아들입니다.</div>;
}

function Mother() {
  const name = "부인";
  return <Son />;
}
function App() {
  return <Mother />;
}

export default App;

부모 컴포넌트인 Mother 함수 안에
"부인"이라는 값을 가진 name이라는 변수를 만들어줬다.
쉽게 말하면 엄마 이름 지어줌

자식 컴포넌트인 Son은 이 엄마의 이름을 알 수 없다. 어떻게 알려줄 수 있을까?

1. 자식 -> 부모 정보 전달

function Mother() {
  const name = "부인";
  return <Son MotherName = {name} />

이렇게 부모 컴포넌트에서 자식컴포넌트로 쓰고자 하는 이름 써주고
변수 입력해주면 자식 컴포넌트에서도 이름을 쓸 수 있다.

아직은 어떠한 변화도 일어나지 않는다.

2. props로 받은 값을 화면에 렌더링 하기

제대로 전달 됐는지 확인해보자.

function Son(props) {
  console.log(props.MotherName);
  // props만 찍으면 MotherName 객체 
  // props.MotherName 찍으면 부인
  return <div>저는 아들입니다.</div>;
}
function Mother() {
  const name = "부인";
  return <Son MotherName={name} />;
}

props를 통해 부모 -> 자식 데이터가 전달된 것을 확인할 수 있다.
props는 object literal 형태이기 때문에
{props.motherName} 로 꺼내서 사용할 수 있다.

여기서 object literal 란 {key: “value”} 를 의미

---

💬 Q1.

1. GrandFather 컴포넌트에서 GrandFatherName을 만들어서 화면에 렌더링 해봅시다.
2. src 폴더 안에 App.js 에 있는 내용을 모두 지우고 새롭게 작성해봅니다.

🙆‍♀️ Solution

import React from "react";

function Son(props) {
  console.log(props.gfname);
  return <div>저는 {props.gfname}의 아들입니다.</div>;
}

function Mother(props) {
  const gfname = props.GrandFatherName;
  return <Son gfname={gfname} />;
}

function GrandFather() {
  const name = "박할아버지";
  return <Mother GrandFatherName={name} />;
}

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

export default App;

콘솔 찍기를 습관화 하자 ~

---