[5주차] 리액트입문: props, props children, prop drilling, props 추출

props란?

 

- component 끼리의 정보교환 방식이다.

- 위에서 아래로(부모에서 자식으로) 방향으로만 흐른다

- 읽기전용으로 취급하며, 변경하지 않는다

 

 

• 부모 컴포넌트 안에서 정의된 데이터를 자식 요소에게 전달할 때 => return <Child 변수명={상수명} />;
• 자식 요소에서 부모 컴포넌트의 데이터를 받을 때 => 컴포넌트 input 자리에 props 받기

엄마 데이터를 자식요소로 전달

// src/App.js

import React from "react";

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

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

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

function Child(props) {
  console.log("props", props); // props {motherName: '홍부인'}
  console.log("props", props.motherName); // 홍부인
  return <div>나는 {props.motherName}의 아들이에요!</div>; // 나는 홍부인의 아들이에요!
}


export default App;

 

할아버지 데이터를 엄마를 거쳐 자식에게 전달

// src/App.js

import React from "react";

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

function Mother(props) {
  return <Child grandFatherName={props.grandFatherName} />;
}

function GrandFather() {
  const name = "이범규";
  return <Mother grandFatherName={name} />;
}

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

export default App;

 

할아버지 데이터를 손자에게, 엄마 데이터를 손자에게 전달

// src/App.js

import React from "react";

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

function GrandFather() {
  const name = "홍범식";
  return <Mother grandpaName={name}/>;
}

function Mother(props) {
  const name = '홍부인';
  return <Child motherName={name} grandpaName={props.grandpaName}/>;
}
// motherName={name} 
function Child(props) {
  return <div>나는 {props.motherName}의 아들이에요! 그리고 {props.grandpaName}의 손자에요!</div>; // 나는 홍부인의 아들이에요!
}

// 나는 홍부인의 아들이에요! 그리고 홍범식의 손자에요!


export default App;

 

 

---

prop drilling

 

할아버지 데이터를 손자에게 전달할 때, 엄마 컴포넌트는 할아버지 데이터를 전달하는 용도로만 사용된다. 이렇듯, 데이터를 전달하기 위해 계속 아래로 뚫고 내려가는 것을 prop drilling이라고 한다.

 

이러한 불필요하게 prop drilling 이 생기는 걸 피해야 한다. 유지보수에 어렵기 때문이다. 이를 피하기 위해 ‘Redux’와 같은 데이터 상태관리 툴을  사용한다.

 

---

Props Children

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

 

// src/App.js

import React from "react";


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

function User(props) {
  console.log(props); //children : 안녕하세요!
  return <div>{props.children}</div>;
}


export default App;

 

왜 children을 쓸까?

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

최종 출력 모습

 

*변동데이터 (갈아끼우는 데이터들)

// src/App.js

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

// ---------- children 방법 ---------- //
function App() {
  return (
    <Layout>
      <div>앱 컴포넌트에서 보낸 항상 변할 수 있는 값입니다!</div>
    </Layout>
  );

}

export default App;

 

 

*변동없는 데이터 (레이아웃, 틀, 와이어프레임들)

// Layout.js

import React from 'react';


function Layout(props) {
  return (
    <div>
      <header
        style = {{
          border: '1px solid red',
          margin: '10px',
          color: 'blue',
        }}
      >
        이곳은 항상 출력되는 헤더영역입니다.
      </header>
      {props.children}
    </div>
  );
}

export default Layout;

 

---

Props VS Children

// src/App.js

import React from "react";

// ---------- children 방법 ---------- //
function App() {
  return <User>안녕하세요!</User>; //children
}

function User(props) {
  console.log("props", props); // {childern : 안녕하세요!}
  return <div>하민이가 '{props.children}'라고 인사했습니다.</div>;
}

// ---------- props 방법 ---------- //
function App() {
  const hello = "안녕하세요!";
  return <User greeting = {hello} />;
}

function User(props) {
  console.log("props is",props); // {greeting: '안녕하세요!'}
  return <div>하민이가 '{props.greeting}'라고 인사했습니다.</div>;
} // 하민이가 '안녕하세요!'라고 인사했습니다.




export default App;

---

props 추출

구조 분해 할당 통해 props 내부값 추출하기

 

// src/App.js

import React from "react";
import Child from "./Child";

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

}

export default App;

import React from 'react';

// 구조분해할당
// const {age, name, children} = person;
// props 세개로 찢기


function Child({age, name, children}) {
  console.log(age); // 21
  console.log(name); // 'test'
  console.log(children); // '이름'
  return <div>Child</div>; 
}

export default Child;

 

 

---

defaultProps

부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값

자식 컴포넌트 아래에 작성

// src/App.js

import React from "react";
import Child from "./Child";

// ---------- children 방법 ---------- //
function App() {
  const name1 = "test";
  return <Child name={name1}>이름</Child>;

}

export default App;

만약 부모인 App 컴포넌트에서 age 데이터를 Child 컴포넌트로 보내주지 않을 경우를 대비해 설정해놓는 디폴트값 설정

import React from 'react';

// 구조분해할당
// const {age, name, children} = person;
// props 세개로 찢기


function Child({age, name, children}) {
  console.log(age); // undefined 에서 -> 초기값 설정 후에 '기본 나이' 로 바뀜
  console.log(name); // 'test'
  console.log(children); // '이름'
  return <div>Child</div>; 
}

Child.defaultProps={
  age: '기본 나이',      // 만약 부모인 App 컴포넌트에서 age 데이터를 Child 컴포넌트로 보내주지 않을 경우를 대비해 설정해놓는 디폴트값 설정
}

export default Child;

 

 

---

Default Argument

매개변수가 지정되지 않았으면 자동으로 지정해줄 값을 정하라는 의미이다.

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));
// Expected output: 10

console.log(multiply(5));
// Expected output: 5