[Javascript] 구조 분해 할당, import, export default 와 연관지어 알아보기

구조 분해 할당

배열이나 객체의 속성을 해체하여 그 인덱스 혹은 키 값을 개별 변수(상수)에 담을 수 있도록 사용하는 Javascript 표현식

//const { 객체 내 key값 } = 객체명
//정해진 key값이 있기 때문에, { 객체 내 key값 }은 바꿀수 없다

const person = {
	age: 30,
	height: 175,
	hobby: "coding"
}

//⭐️ 구조 분해 할당, 객체 안의 key값이 각각 하나의 상수가 되는 것!
const { age, height, hobby } = person
console.log(age); //30

//import { key값 } from "경로/라이브러리명"과 연관지어 생각해 볼 수 있음!

 

 

⭐️ 중요

import { key값 } from "경로/라이브러리명"


//1. 기본값(defalt) 없이 변수, 함수, 객체를 내보내기(export)
export const theme = {
	
}
//중괄호로 가져오기(import)
import { theme } from "" 

//2. 기본값(default) 있이 변수, 함수, 객체를 내보내기(export)
export default const theme = {
	//기본으로 가져오는 것이 theme라는 뜻
}
//내가 가지고 오고 싶은 값/명으로 가져오기(import)
import theme from "" 

//3. 단, 일반 함수가 아니라 jsx 문법의 컴포넌트는 기본값(default)으로 지정한 명과 컴포넌트명이 같게 사용한다
//다시말해 보통은 export 기본값(default)으로 지정한 값/명과 함께 가져오고 싶은 값/명으로 가져오기(import)가 흔하게 쓰인다
export default function LoginPage(){

}
import LoginPage from './Login.js';

요약

export default const theme 
import { theme } from ""

export default const theme
import theme from ""