React에서 사용하는 비구조화 할당

https://react.vlpt.us/basic/05-props.html

5. props 를 통해 컴포넌트에게 값 전달하기 · GitBook

https://learnjs.vlpt.us/useful/06-destructuring.html

06. 비구조화 할당 (구조 분해) 문법 · GitBook

* 해당 게시물은 Velopert님의 학습자료를 참고하여 작성하였습니다.

* 개인의 학습 목적으로 따로 포스팅중입니다.

 

 

비구조화 할당 (구조 분해 할당) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Js의 표현식입니다.

 

예시)

const game1 = {
	name: 'MapleStoryWorld',
    genre: 'Sandbox'
}

const game2 = {
	name: 'MapleStory',
    genre: 'Rpg'
}

function print(game) {
	const { name, genre } = game;
    const text = `${name} 게임의 장르는 ${genre} 입니다`;
    console.log(text);
}

print(game1);
print(game2);

 

여기에서 아래에 해당하는 부분이 객체 비구조화 문법입니다.

const { name, genre } = game;

각각 name과 genre라는 변수에 game 객체 내부에 존재하는 name 과 genre를 넣어주겠다는 의미와도 같습니다.

 

그렇다면 Js의 라이브러리 중 하나인 React에서 이러한 비구조화 할당 사용 예시를 보여드리겠습니다.

일반적으로 react에서 자주 사용하는 props에서 비구조화 할당을 자주 사용하게 됩니다 (이외 사용방법은 무궁무진합니다)

 

가령 print라는 함수에서 someProps 라는 props를 받아왔다고 합시다.

이 someProps는 name과 value를 가진다고 해 보겠습니다.

 

import React from 'react';

const print = (someProps) => {
	return <div>{someProps.name}, {someProps.value} </div>
}

export default print;

이는 위와 같이 조회할 수 있습니다.

 

하지만 더 간략하게 아래와 같이도 나타낼 수 있습니다. props를 받아오는 과정에서 아예 비구조화를 진행하는 방법입니다.

import React from 'react';

const print = ({ name, value }) => {
	return <div>{name}, {value} </div>
}

export default print;

이는 Js에서도 비슷하게 사용할 수 있습니다.