React입문 1주차(Props)

props

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

1. props는 반드시 위에서 아래 방향으로 흐른다.
   • 즉, [부모] → [자식] 방향으로만 흐른다(단방향).
2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

---

Mother컴포넌트에서 Son컴포넌트로 name = '흥부인' 이라는 정보를 전달했다

import React from 'react';

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

// 엄마
// Mother -> Son 으로 정보를 전달했다.
function Mother() {
  const name = "흥부인";
  return <Son motherName={name}/>; // Mother컴포넌트에서 Son컴포넌트로 다음과 같은 정보를 내려줬다_props
}

// 할아버지 대문자로 시작하는 낙타로 컴포넌트 명명
function GrandFather() {
  return <Mother />;
}

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

export default App;

---

Mother컴포넌트에서 전달한 정보는 Son컴포넌트에서 받고(props를 통해 부모 -> 자식으로 데이터가 전달 된것을 확인)

console.log로 출력해서 확인

import React from 'react';

// 자식
function Son(props) {
  console.log("props", props);
  return <div>나는 아들입니다.</div>;
}

// 엄마
// Mother -> Son 으로 정보를 전달했다.
function Mother() {
  const name = "흥부인";
  return <Son motherName={name}/>;
}

// 할아버지 대문자로 시작하는 낙타로 컴포넌트 명명
function GrandFather() {
  return <Mother />;
}

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

export default App;

---

props는 object literal 형태이기 때문에 {props.motherName}로 꺼내서 사용할 수 있다. object literal의 key가motherName인 이유는 우리가 Child로 보내줄 때motherName={name}으로 보내주었기 때문이다.

object literal란 {key: “value”} 데이터 형태를 의미

function Son(props) {
  console.log("props", props); // props를 출력하니까 {mother: "흥부인"}으로 출력이 되고
  return <div>나는 아들입니다.</div>;
}

▼ 으로 바꿔주면

function Son(props) {
  console.log("props", props.motherName); // props를 출력하니까 흥부인으로 출력이 되고
  return <div>나는 {props.motherName}아들입니다.</div>;
}

---

import React from 'react';

// 자식
function Son(props) {
  console.log("props", props.GrandFatherName); // props를 출력하니까 {mother: "흥부인"}으로 출력이 되고
  return <div>나는 {props.GrandFatherName}의 손자입니다.</div>;
}

// 엄마
// Mother -> Son 으로 정보를 전달했다.
function Mother(props) {
  return <Son GrandFatherName={props.GrandFatherName}/>; // props이고
}

// 할아버지 대문자로 시작하는 낙타로 컴포넌트 명명
function GrandFather() {
  const name = '흥할아버지'
  return <Mother GrandFatherName={name} />;
}

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

export default App;

---

import React from 'react';

// 자식
function Son(props) { // 4. 데이터를 받아서
  console.log("props", props.gfName); // 흥할아버지
  return <div>나는 {props.gfName}의 손자입니다.</div>;
}

// 엄마
function Mother(props) {  // 2. 할아버지의 데이터를 받고
  // console.log("props", props); // 2. {GrandFatherName: '흥할아버지'}
  const gfName = props.GrandFatherName // 받은 데이터를 변수로 지정해주고 

  return <Son gfName={gfName}/>; // 3. 변수로 지정한 할아버지의 데이터를 gfName로 Son컴포넌트로 내려주고(전달만 하는 중간다리 역할로 이런 중간다리 역할의 부분들을props drilling라고 함) 
}

// 할아버지 
function GrandFather() {
  const name = '흥할아버지'
  return <Mother GrandFatherName={name} />; // 1. name "흥할아버지"를 Mother컴포넌트로 내려주고 
}

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

export default App;

[부모] → [자식] 컴포넌트간 데이터 전달이 이루어지는 방법은 props라고 한다.

[부모] → [자식] → [그 자식] → [그 자식의 자식] 이 데이터를 받기 위해선 무려 3번이나 데이터를 내려줘야 하는데 이걸 바로 prop drilling, props가 아래로 뚫고 내려간다고 한다.

---

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