중첩 구조 분해 패턴

중첩된 데이터 안으로 들어가기

중첩된 속성 구조 분해하기

const data = { user: { name: "Ada", age: 36 } }
const { user: { name } } = data
console.log(name) // Ada

바깥쪽 이름은 바인딩되지 않습니다

const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not defined

중첩 구조 분해에 타입 지정하기

const { user: { name } }: { user: { name: string } } = {
  user: { name: "Leo" },
}
console.log(name)

이름이 지정된 타입이 더 읽기 쉽습니다

interface Data { user: { name: string; age: number } }
function show({ user: { name, age } }: Data) {
  console.log(name + " " + age)
}
show({ user: { name: "Ada", age: 36 } })

두 수준 모두 추출하기

interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)

중첩과 기본값 함께 사용하기

interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
  return color
}
console.log(style()) // black

없는 하위 객체에 기본값 지정하기

interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhost

객체 안의 중첩 배열

const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts

가독성의 장단점

// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0

균형 잡힌 예시

interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
  return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))

빠른 확인

복습