[TIL]231101_React 입문, props로 값 전달하기

📚 Props란?

컴포넌트 끼리의 정보 교류 방법!

• 위에서 아래방향으로 흐름(부모 ➡️ 자식)
• 읽기 전용으로 취급되어 변경하지 않음

props 값 전달 예시

import React from "react";

// 자식 컴포넌트
function Child(props) {
  console.log("props", props.grandpaName);
  return <div>나는 {props.grandpaName}의 손자입니다.</div>;
}

// 부모 컴포넌트
function Parents(props) {
  // console.log("props", props.grandpaName);
  const gpName = props.grandpaName;
  // const name = "홍여사";
  return <Child gpName={gpName} />;
}

//할아버지
function Grandpa() {
  const name = "산타할버지";
  return <Parents grandpaName={name} />;
}

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

export default App;

할아버지의 값을 부모에게 전달하고 그 값을 다시 자식에게 전달
자식은 부모에게 전달할 수 없음!

📚 Props Children

자식 컴포넌트에 값을 전달하는 또 다른 방법

(크게 어려운 내용은 아니지만 뭔가 이 원리를 이해하는것에 시간이 좀 걸렸다..)

import React from "react";

function User(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <User>안녕하세요</User>;
}
export default App;

children 이라는 이름으로 정해져 있기 때문에 정보를 전달하는 방식은 동일하다고 보면된다.

📚 Props 추출

(이 부분은 아직 완전히 이해를 한 상태가 아니기 때문에 몇번 더 반복해서 보고 정리해보아야 할 것 같다.)