[React] props 추출

[App.js]

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

function App() {
  const name = "test";
  return (
    <Child age={21} name={name}>
      children props 입니다.
    </Child>
  );
}

export default App;

 

[Child.js]

구조분해 할당을 통해 파라미터안을 props -> { age, name, children } 으로 작성할 수 있음.

import React from "react";

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

export default Child;

 

---

defaultProps

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

 

다음과같이 age props 부분에 주석처리를 하고 실행하면,

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

function App() {
  const name = "test";
  return (
    <Child /*age={21}*/ name={name}>
      children props 입니다.
    </Child>
  );
}

export default App;

a

age props 부분은 undefined 가 나온다.

이때문에 미리 Child 에서 value 를 지정해줄 수 있는데, 

 

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;

저장해놓은 defaultProps 값이 나타난다.

 

Default Argument 와 비슷한데,

import React from "react";

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

export default Child;

age = "23" 처럼 값을 지정해주면 그 값이 나타난다.