리액트 변수에 중괄호 {}는 왜 붙는 것일까?

해당 문법은 리액트 이전에 ES6 문법을 찾아보면 답이 나온다고 한다. (아직 보지 않았다... 잇힝)

참고 키워드: destructuring assignment

 

리액트를 보면, 굳이 리액트가 아니더라도 자바스크립트 기반 라이브러리를 보면 변수에 중괄호를 활용하는 경우를 자주 볼 수 있다. 그 이유를 간단하게 알아보자.

 

const { monkey, handsome_guy } = withDance

 

위 변수는 다음과 같은 의미를 지닌다.

 

const monkey = withDance.monkey
const handsome_guy = withDance.handsome_guy

 

이미 withDance 라는 state 내부에 monkey, handsome_guy 요소가 있고, 그 요소를 각각 monkey, handsome_guy라는 변수에 할당하는 것이다.

 

const withDance = {
	monkey: "feel bad...",
    	handsome_guy: "Wooooow!"
}

 

그렇게 때문에 실질적으로 들어있는 값은 다음과 같을 것이다.

 

const { monkey, handsome_guy } = { "feel bad...", "Wooooow!" }

// 실질적으로는

const monkey = "feel bad..."
const handsome_gut = "Wooooow!"

 

덧붙여서, import에도 중괄호가 붙는 경우가 많다. 어떻게 파일을 내보내느냐 방식의 차이로 표현이 달라지는 것이다.

(아마도?)

 

import React from ~~

const Lupin = () => {
	// Hard Playing...
}

const SomeNogada = () => {
	// Hard Working...
}

export default SomeNogada

 

내가 이해한 바로는, default 값으로 내보내는 값은 중괄호가 필요없지만 그 외는 중괄호가 필요하다.

 

import { Lupin } from ~~
import SomeNogada from ~~

 

이런 식으로!