[React] Props

📌 Props란?

: 컴포넌트 간의 정보 교류 방법

props 란? 부모 컴포넌트가 자식 컴포넌트에 넘겨준 데이터들의 묶음!!

 

<이 2가지를 기억하자>

1. props는 반드시 위 -> 아래 방향으로 흐른다. = [부모 컴포넌트] -> [자식 컴포넌트] 방향
2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

1. props로 값 전달 하기 [주체 : 부모]

: props로 정보를 전달한다.

📝 Props를 받는 방법 1

<자식 컴포넌트 이름 /> : 자식 컴포넌트 이름 + / 닫는 태그를 사용하여 자식 컴포넌트를 불러온다.

💡 moterName이라는 이름으로 Child 컴포넌트에 name의 값을 넘겨준다.

function Mother( ) {
  const name = "홍부인";
  return <Child motherName={name} />; 
}

2. props로 값 전달 받기 [주체 : 자식]

: props를 통해 부모 컴포넌트로부터 데이터를 넘겨 받는다.

💡 Mother 컴포넌트로부터 보낸 객체 형태의 데이터를 props라는 input으로 받는다.

function Child(props) {

console.log("props", props) // console.log를 확인해보자.
console.log("props", props.motherName) // console.log를 확인해보자.

  return <div>나는 아들이에요!</div>;
}

 

▶️ console.log("props", props) 를 찍어보면, {motherName : "흥부인"} 이라는 객체 형태로 전달되는 것을 알 수 있다.

▶️ console.log("props", props.motherName) 를 찍어보면, motherName이라는 key 값에 접근하여, 흥부인 이라는 value 값만 전달 된다.

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

: 부모 컴포넌트(Mother) -> 자식 컴포넌트(Child)로 전달되는 부분인 {props.motherName}의 형태로 나타낸다.

props는 object literal 형태이므로 {props.motherName} 으로 사용 가능하다.

📌 object literal 이란? {key : "value"} 데이터 형태이다.

props의 key가 motherName인 이유는 Mother 컴포넌트에서 Child 컴포넌트로 데이터를 내려줄 때, motherName={name}으로 보냈기 때문.

function Child(props) {
  return <div>나는 {props.motherName}의 아들이에요!</div>;
}

▶️ Output : 나는 흥부인의 아들이에요! 라고 출력된다.

 

✅ GrandFather > Mother > Child로 순차적으로 데이터를 아래로 전달 할 수 있다.

import React from "react";

//props를 통해 부모 -> 자식으로 데이터가 전달된다.
function Child(props) {
  return <div>나는 {props.gfName}의 손자예요!</div>;
}

// 부모 컴포넌트에서 ->  자식으로 정보를 전달했다.
function Mother(props) {
  const gfName = props.grandFatherName;
  const name = "홍부인";
  return <Child gfName={gfName} />;
}

function GrandFather() {
  const name = "홍길동";
  return <Mother grandFatherName={name} />;
}

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

export default App;

4. Prop drilling

하지만, 부모 컴포넌트 -> 자식으로 전달 할 때,
1 컴포넌트에서 5 컴포넌트로 데이터를 전달하기 위해서는, 1 → 2 → 3 → 4 → 5 순으로, 2,3,4 컴포넌트한테 불필요한 데이터 전달이 일어난다.
이를 prop drilling이 일어난다고 말한다.

 

📌 prop drilling
: props가 아래로 뚫고 내려간다. 라는 의미

 

이러한 prop drilling 이 일어나면, 중간에 오류가 발생하였을 때, 어디서 발생 했는지 확인을 바로 하기가 어려워 유지보수가 힘들다.
→ 이를 해결하기 위해 Redux와 같은 데이터 상태관리 툴을 사용한다. (추후 학습할 예정)

5. Props Children

📝 Props를 받는 방법 2

<자식 컴포넌트 이름><자식 컴포넌트 이름 /> : 이렇게 컴포넌트를 사용하면, children props로 보내는 방식을 의미한다.

import React from "react";

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

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

 

🧐 그렇다면, children 문법을 굳이 왜 쓸까?

: Layout 컴포넌트를 만들 때 자주 사용한다.

src/ Layout.jsx

import React from "react"

function Layout(props) {
  return (
  <>
    <header> 
      이건 모든 페이지에서 보이는 헤더 입니다. 
    </header>
    {props.children}
  </>  
  );
}
export default Layout;

App.jsx

import React from "react";
import Layout from "./components/Layout";

function App() {
  return (
    <Layout> 
      <div>여긴 App의 컨텐츠가 들어갑니다.</div> // 여기의 값이 항상 Layout의 {props.children} 위치에 들어가게 된다. 
    </Layout>
  );
}
export default App;

▶️ Layout 컴포넌트에서 작성한 header를 한 번만 작성하면, 모든 페이지에서 볼 수 있다.

6. Props 추출

📌 구조분해할당

: 객체의 구조를 분해하여 작성해줌으로써, 객체 내부의 key 값에 보다 쉽게 접근할 수 있다.

const obj = {
name : "홍길동",
age : 30,
company : "sparta",
}

const {name, age, company} = obj;

 

Props 추출하는 방법

1) App.js에서 Child 컴포넌트를 import하고, Child로 데이터를 props children으로 내려준다.

import React from "react";
import Child from "Child"; // Child에서 export 했으므로, import 가능!!

function App() {
  const name = "test";
  return (
    <Child age={21} name={name}>
      이름
    </Child>
  );
}

export default App;

 

2) App.js로 부터 데이터를 props로 불러오면 다음과 같다.

import React from "react";

function Child(props) {
    console.log(props)
  return <div>Child</div>;
}

export default Child;

✅ props를 console.log로 찍어보면 다음과 같다.

props가 객체 형태로 데이터를 받아오는 것을 알 수 있다.

 

3) 여기서 구조분해할당을 이용하여 props를 나타내주면,

const { age, name, children } = props

 

4) props 자리 대신에 { age, name, children } 가 들어간다.

import React from "react";

function Child({ age, name, children }) {

  //구조분해할당으로 찢어놓는다.
  console.log(age); // 21
  console.log(name); // test
  console.log(children); // 이름

  return <div>Child</div>;
}

export default Child;