Propertys (속성) 에서 나온 Props

01. Props 개요

1. Props란?

(1) 컴포넌트 끼리의 정보교환 방식

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

• props는 반드시 위에서 아래 방향으로 흐른다. (부모->자식 단방향)
• props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. (신체발부 수지부모 어쩌고)

(2) 코드를 통해 살펴보기

Mother 컴포넌트에서 못보던 코드가 생겼다. mother의 이름이 생겼다.
하지만 우리 Child는 지금 Mother의 이름을 모르는데. 😥
어떻게 해야 Child 컴포넌트에서 Mother의 이름을 알 수 있을까?

2. Props로 값 전달하기

3. Props로 받은 값을 화면에 랜더링 하기

4. Props 사용해보기

GrandFather 컴포넌트에서 GrandFatherName을 만들어서 화면에 렌더링 해보쇼

1. 
2. 

둘 다 똑같은 형만 할아버지가 출력

5. Props drilling

[부모] → [자식] 컴포넌트간 데이터 전달이 이루어지는 방법이 props
[부모] → [자식] → [그 자식] → [그 자식의 자식] 이 데이터를 받기 위해선 무려 3번이나 데이터를 내려줘야 한다.
이걸 바로 prop drilling (props가 아래로 뚫고 내려간다) 라고 한다.

💥 나쁜 패턴 !! => Redux 라는 데이터 상태관리 툴을 사용

02. Props Children 이란?

1. Children 이란?

자식 컴포넌트로 정보를 전달하는 또 다른 방법. (또 다른 props)

😥왜 '안녕하세요'는 안나오는걸까요?

App 컴포넌트에서 ‘안녕하세요' 라는 정보를 보냈지만
User 컴포넌트에서는 그 정보를 받지 않았기 때문

부모 컴포넌트에서 정보를 보냈을 때, 자식 컴포넌트에서 그 정보를 사용하고 싶다면 props를 통해 정보를 받아와야 했다.

• 하지만 위 예시에서는 User 컴포넌트에서 그 정보를 받고 있지 않기 때문에 화면에 어떠한 문장도 보이지 않고 있는 것!

• 위 예시에서는 <User>안녕하세요</User> 이렇게 정보를 보내고 있는데,
  <User hello='안녕하세요'> 이렇게 props를 보내던 방식과는 조금 다르다.

• 이것이 children props를 보내는 방식 이다.
  그렇다면 자식 컴포넌트에서는 어떻게 정보를 받을까?
  정보를 받는 방식은 기존과 동일합니다. 대신 그 이름이 children 으로 정해져 있다.

2. Children 값 받아서 랜더링

childern을 써주니 잘 나온다.

3. Children의 용도

💥 Layout 컴포넌트를 만들 때 주로 사용
Layout 컴포넌트 안에는 header 라는 컴포넌트가 있고, header 아래에 {props.children} 를 통해서 props를 받아 렌더링 하고 있다.

즉, Layout 컴포넌트가 쓰여지는 모든 곳에서 <Layout>…</Layout> 안에 있는 정보를 받아서 가져옴

// src/About.jsx

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

function App() {
  return (
    <Layout> 
      <div>여긴 App의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default App;

Layout에 있는 header가 보여지게 되고,
“여긴 App의 컨텐츠가 들어갑니다.” 라는 문장이 Layout의 props로 전달

🚨 결과적으로 header 컴포넌트를 Layout 컴포넌트에서
한번만 작성하면 여러 페이지에서 모두 보여지게 할 수 있는 것

Layout 컴포넌트를 About 컴포넌트에 재사용.

// src/About.jsx

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

function About() {
  return (
    <Layout> 
      <div>여긴 About의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default About;

03. Props 추출

1. 구조분해할당과 Props

우리는 지금까지 자식 컴포넌트에서 props를 받을 때 이렇게 했다.

function Todo(props){
	return <div>{props.todo}</div>
}

문제는 없지만 todo 라는 props를 사용하는 모든 곳에서 props. 를 붙여줘야 했다(귀찮음)
이것을 조금 더 짧게 쓰는 방법
=> 자바스크립트의 구조 분해 할당 을 이용하는 것

props는 object literal 형태의 데이터이다.
그래서 우리는 구조 분해 할당을 이용할 수 있다.

function Todo({ title }){
	return <div>{title}</div>
}

훨씬 간단하고 짧아졌다. 😨
만약 여러개의 props를 받는다면, { } 안에 여러개의 props를 그대로 써주면 된다.

function Todo({ title, body, isDone, id }){
	return <div>{title}</div>
}

2. default arguments

🚨 컴포넌트가 부모로부터 특정 props를 받지 못했을 경우에도 에러 없이 기본값을 사용하여 컴포넌트를 렌더링할 수 있게 해 줍니다.
자식 컴포넌트에서 해당 props의 기본값을 설정(default arguments) 해준다.