React Props 추출

구조분해 할당과 Props

지금까지 배운바로는 자식 컴포넌트에서 props를 받을 때 이렇게 받았다.

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

문제가 있는 방법은 아니지만, todo라는 props를 사용하는 모든 곳에서 props.를 붙여줘야하는 번거로움이 있었다. 이것을 좀더 간편하게 사용하는데 활용되는 JS문법이 '구조분해할당'이다. props는 object literal형태의 데이터이기 때문에 구조분해할당을 사용할 수 있다.

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

이렇게 컴포넌트 함수의 매개변수 부분을 객체 형태로 변환하여 key를 명시해주면, 자식 컴포넌트에서도 key변수를 그대로 가져와서 활용할 수 있다.

defaultProps

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

ex)

<script>
// components/Child.js

import React from 'react';

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

export default Child
</script>

이렇게 name이라는 변수를 부모 컴포넌트로 받아오는 컴포넌트가 있을 때, 특정 경우 부모 컴포넌트로부터 props를 전달받지 못 해도 할당될 default값을 말한다. 다음과 같은 방법으로 지정할 수 있다.

<script>
// components/Child.js

import React from 'react';

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

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

export default Child
</script>

이와 유사한 것이 JS의 Default Argument이다.

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

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

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