ES6) 비구조화 할당 destructuring assignment

비구조화 할당 destructuring assignment

기본적으로 전달받은 props 컴포넌트에서 사용하는 방법은 다음과 같습니다. 인자로 props를 받고, props.{props값 명} 으로 사용합니다.

사용할때마다 굳이 props. 을 붙여주는 것은 불편하기 때문에 비구조화 할당 문법을 사용하는 것입니다. 

// 부모 컴포넌트 -> <Component name='world' /> 

...

const Component = props => {
	return <div> hello {props.name} </div>;
}

...

• 비구조화 할당 방법 1

// 부모 컴포넌트 -> <Component name='world' extra='!'/> 

...

const Component = props => {

	const { name, extra } = props;
	return <div> hello {name} {extra} </div>;
}

...

// hello world!

이렇게 함수 시작 부분에 사용할 props 들을 묶어 props 로 선언해 놓고, props.없이 사용할 수 있습니다. 

• 비구조화 할당 방법 2

// 부모 컴포넌트 -> <Component name='world' /> 

...

const Component = ({ name }) => {
	return <div> hello {name} </div>;
}

...

저는 주로 이 방법을 사용했는데 다른 이유는 없고 그냥 작성해야 할 코드가 줄어들기 때문입니다. 이 방법도 위 예시처럼 여러 개의 props를 사용하는 경우 ({ name, extra }) 이렇게 추가해주면 됩니다.