구조분해 할당과 Props / default Props

1. 구조분해 할당과 Props

 

지금까지 우리는 이런식으로 props 값을 받아왔다.

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

todo라는 props를 사용하는 모든 곳에서 props.를 붙여줘야만 했다.

이것을 조금 더 짧게 쓰는 방법이 있는데, 바로 자바스크립트의 구조 분해 할당을 이용하는 것이다.

 

구조분해 할당이 무엇인지는 아래 영상을 참고하자.

https://www.youtube.com/watch?v=lV7ulA7R5Nk 

 

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

 

예시) 훨씬 간결해진 모습이다.

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

 

만약 여러개의 props를 받는다면 아래와 같이 { } 안에 여러개의 props를 그대로 써주면 된다.

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

 

2. default Props

default Props란?

 

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

 

예를 들어보자.

// components/Child.js

import React from 'react';

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

export default Child

 

 

Child 컴포넌트의 name은 props 정보를 받기 전까지는 없는 상태다.

따라서 내 이름은 ""입니다. 가 출력될 것이다.

근데 저 ""을 공란으로 두면 굉장히 어색할 것이다.

 

그래서 props를 받기 전이라도 일단 임시적으로 사용할 수 있는 props를 설정할 수 있다.

이는 Child 컴포넌트에서 직접 가능하다.

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

값이 바뀌게 된다.

 

default Props 지정하기

// components/Child.js

import React from 'react';

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

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

export default Child

 

다른방법

import React from 'react';

// 구조 분해 할당 문법을 사용하면 이렇게도 할 수 있다.
function Child({ name = '기본이름' }){
	return <div>내 이름은 {name} 입니다. </div>
}

export default Child