리액트 입문(Props 추출)

import React from 'react'
import Child from 'Child'

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

export default App

App.js에서 Child 컴포넌트로 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>
    </>
  )
}


// Child.defaultProps={
//     age : '기본 나이'
// }

export default Child

Child 컴포넌트에서 받은 props를 구조분해할당을 사용해 age, name, children에 할당해서 console을 찍어보면 

이와 같이 나오게 된다. props.age 나 props.name보다 좀 더 직관적으로 코드를 사용할 수 있게 된다. 

---

# defaultProps

만약 부모 컴포넌트에서 age 값을 보내주지 않고, 자식 컴포넌트에서 age를 찍으려고 한다면 undefined가 나올 것이다. 이때 defaultProps를 지정하면 값이 들어오지 않을때 기본으로 출력되는 값을 지정할 수 있다. 

이후에 부모 컴포넌트에서 name props가 오게되면 설정된 defaultProps는 사라지고 내려 받은 props로 값이 바뀌게 된다. 

 

// components/Child.js

import React from 'react';

function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

// 이렇게 설정합니다.
Child.defaultProps={
	name: '기본 이름'
}

export default Child

이렇게 defaultProps를 설정하면, 부모 컴포넌트로부터 아직 props 값을 받지 못했더라고 임시로 props의 값을 채울 수 있다. 그리고 부모 컴포넌트로부터 props가 오게되면 defaultProps 값은 진짜 props 값으로 변경된다.