Props 추출

1. 구조분해할당 문법을 이용하여 props의 내부값을 추출하여 자식컴포넌트에서 사용할 수 있습니다.
2. default props를 지정하는 방법에 대해 설명할 수 있습니다.

구조분해 할당과 Props

구조 분해 할당 통해 props 내부값 추출하기
props는 object literal 형태의 데이터이기에 구조분해할당을 이용할 수 있습니다.

예시>

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

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

여러개의 props를 받는다면, { } 안에 여러개의 props를 그대로 써주면 됩니다.

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

defaultProps

defaultProps란, 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값 입니다.

Child.js

import React from "react";

function Child({ age, name, children }) {
  console.log(age);
  console.log(name);
  console.log(children);
  return <div>Child</div>;
}

Child.defaultProps = {
  age: "기본 나이",
};

export default Child;

App.js

import React from "react";
import Child from "Child";

function App() {
  const name = "test";

  return (<Child name={name}>이름</Child>);
}

export default App;

age 데이터를 가지고 오지 않아도 default 값으로 "기본 나이"를 출력해준다.

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

multiply의 b에 아무 값도 주지 않았을때 b = 1이라는 값을 기본적으로 입력한다.