리액트[기초] 비구조화 할당 문법(구조 분해 문법) | 배열 비구조화 할당

비구조화 할당(destructuring assignment) 문법 이란?

• props 내부 값을 바로 추출하는 방법을 말한다 
• 객체에서 값을 추출하는 문법으로 구조 분해 문법 이라고도 한다 
• 함수의 파라미터 부분에서도 사용할 수 있다
• 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용한다

/* 기존 방법 */
// 자식 컴포넌트
const MyComponent = (props) => {
	return( 
    	<div>
        // 안녕하세요, 제 이름은 기본 이름 입니다.
        안녕하세요, 제 이름은 {props.name} 입니다.<br/> 
        
        // children 의 값은 리액트 입니다.
        children 의 값은 {props.children} 입니다. 
        </div>;
     );
};

// 부모 컴포넌트에서 props 값을 따로 지정 하지 않았을때 보여줄 기본 값 
MyComponent.defaultProps = {
	name: '기본 이름'
};

export default MyComponent;

/*  비구조화 할당 문법 방법 
기존에는 자식 컴포넌트에서 props 값을 조회 할때마다 props.name , props .children 처럼 props 키워드를 
앞에 붙여 주었었는데 이런 작업을 더 편하게 하기 위해서 Es6 의 비구조화 할당 문법을 사용해 내부 값을 바로 추출 했다 
*/

// 자식 컴포넌트
const MyComponent = (props) => {
const { name, children } = props;
	return( 
    	<div>
        // 안녕하세요, 제 이름은 기본 이름 입니다.
        안녕하세요, 제 이름은 {name} 입니다.<br/> 
        
        // children 의 값은 리액트 입니다.
        children 의 값은 {children} 입니다. 
        </div>;
     );
};

// 부모 컴포넌트에서 props 값을 따로 지정 하지 않았을때 보여줄 기본 값 
MyComponent.defaultProps = {
	name: '기본 이름'
};

export default MyComponent;

---

배열 비구조화 할당이란?

• 배열 안에 들어있는 값을 쉽게 추출할 수 있도록 해주는 문법이다.

// 기존 방법
const array = [1,2];
const one = array[0];
const two = array[1];

// 배열 비구조화 할당을 사용한 방법
const array = [1,2];
const [one, two] = array;