구조분해할당(Destructuring)

JavaScript

2023-04-10

구조분해할당 (= 비구조화할당)?

const cat = {
	name : 'Evie',
	age : 4,
	breed : 'Munchkin'
}
const name = cat.name
const age = cat.age
const breed = cat.breed

const {name, age, breed} = cat
// 중괄호 의미는 객체

const {data, loading} = useQuery(...) 에서 useQuery()의 리턴타입은 객체라는 것을 알 수 있다.

const fruits = ['Apples', 'Banana', 'Cucumber']
const fruit1 = fruits[0]
const fruit2 = fruits[1]
const fruit3 = fruits[2]

const [fruit1, fruit2, fruit3] = fruits
// 대괄호 의미는 배열

const [aaa, setAaa] = useState('') 에서 useState()의 리턴타입은 배열이라는 것을 알 수 있다.

중괄호와 대괄호 차이

객체는 이름(key)를 가지고 할당한다면 배열에는 이름 상관 없이 자리로 할당한다. 객체는 key값으로 순서 상관 없이 한가지 변수만 받아올 수 있다면 배열에는 반드시 비어있는 자리[, , fruits3] = fruits를 명시하여 원하는 위치의 변수를 받아와야 한다.

apollo client useQuery 만들기 예제

export function useQuery(query){
// query(ex: FETCH_BOARDS)를 통해서 백엔드에 API 요청

	return {
		data: {fetchBoards: {writer: '철수'}},
		loading: false,
		refetch: () => {
			console.log('refetching...')
		}
	}
}

import {useQuery} from '@apollo/client'
const {data, refetch} = useQuery('FETCH_BOARDS')
console.log(data.fetchBoards.writer) // '철수'

react useState 만들기 예제

export function useState(aaa){
	const myState = aaa // aaa를 사용해서 state의 초기값 설정
	const mySetState = (bbb) => {
		// 1. myState를 bbb로 변경하기
		console.log(`${myState}에서 ${bbb}로 state를 변경합니다`)
		// 2. 해당 컴포넌트를 리렌더링하기 (class component의 render함수)
		console.log(`변경된 ${bbb}를 사용해서 컴포넌트를 리렌더링합니다`)
	}
	return [myState, mySetState]
}

import {useState} from '...' 

const [count, setCount] = useState(10)
setCount(20) 
// "10에서 20으로 state를 변경합니다" 
// "변경된 20을 사용해서 컴포넌트를 리렌더링합니다"

REST 파라미터

const cat = {
	name : 'Evie',
	age : 4,
	breed : 'Munchkin',
	food : 'Kibbles',
	treat : 'Churu'
}

food, treat을 지우고 싶다고 하자.

delete cat.food
delete cat.treat

위처럼 delete를 사용할 수 있지만 원본을 건드릴 수 있기 때문에 안전상 좋지 않은 방법이다. 협업 측면에서도 파장을 예측하기 어려운 게 사실이다.

이 때에는 rest 파라미터를 사용하면 원하는 정보를 만들 수 있다.

const {food, treat, ...rest} = cat

food, treat이 구조분해할당되고, 나머지를 rest 파라미터로 받아올 수 있다.