[ React ] 구조 분해 할당과 Props

 

 

현재는 자식 컴포넌트에서 props를 받을 때 

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

 

위와 같이 todo를 사용하는 모든 곳에서 props. 을 붙여서 사용했다.

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

 

props는 object literal ( 중괄호 ' { } '를 사용하여 객체를 직접 생성하는 표기법 ) 형태의 데이터이다.

그래서 구조 분해 할당을 이용해 짧게 props 값을 추출할 수 있다.

 

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

 

구조 분해 할당을 통해 훨씬 간단하고 깔끔해진 모습을 볼 수 있다.

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

 

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

 

 

추가적으로 default props 를 지정할 수 있는데,

// components/Child.js

import React from 'react';

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

// defaultProps 설정 //
Child.defaultProps={
	name: '기본 이름'
}

export default Child

 

이렇게 defaultProps 를 설정하면, 상위 컴포넌트로부터 아직 props 값을 받지 못해도 임시로 props의 값을 채울 수 있다.

그리고 상위 컴포넌트로부터 props 값이 오게되면 defaultProps = props 값으로 변경된다.

 

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=1 이라는 default 값을 가진다.

 

mutiply(5, 2) = 5 * 2 이므로 10이 나온다. ( b에 2라는 값이 존재해서 5 * 2 적용 )

multiply(5) 는 b 값이 지정되지 않았으므로 default 값인 1을 적용해서 5 * 1 = 5 이다.