[React+JS] 헷갈리는 `중첩 객체` 구조분해할당

리액트는 자식 컴포넌트에 값을 전달할 때 props라는 녀석으로 전달하게 된다. props는 전달한 인자를 통으로 묶은 객체 형태로 전달이 된다. 

 

예시 코드

// 부모
<자식 name={'길동'} age={30} />

// 자식
const 자식 = (props) => {
  console.log(props) // 출력: {name: '길동', age: 30}
}

객체로 전달한 적이 없으나 props라는 객체 안에 내가 전달한 변수들이 들어있는것을 확인할 수 있다. 

 

 

💡 객체를 하위 컴포넌트로 전달

위 처럼 간단한 데이터를 보내는게 아니고 객체를 보내야 한다면 아래와 같은 구조로 props를 받아올 것이다. 

obj = {name:'길동', age: 30}
<자식 obj={obj} />

const 자식 = (props) => {
 const name = props.obj.name;
 const age = props.obj.age;
}

저렇게 접근하지 않고 중첩된 객체에 대한 구조분해는 어떻게 진행하는지 3가지 정도 방법에 대해 알아봅시다. 

 

 

📍 (1) - spread 문법

첫 번째 방법은 spread 문법을 사용해서 전달하는 방법이다. 

 

부모 컴포넌트에서 전달할 때 (spread)

obj = {name:'길동', age: 30}
<자식 {...obj} />

 

자식 컴포넌트에서 받을 때

// props에 들어있는 값 : props.name, props.age
const 자식 = ({name, age}) => {}

부모 컴포넌트에서 풀어서 전달하면, 받을 때 평범하게 우리가 원하던 생김새로 구조분해할당이 가능하다. 

 

 

📍 (2) - 속성 명시

두 번째 방법은 받을 때 속성을 명시해주고 할당하는 방법이다. 

 

부모 컴포넌트에서 전달할 때 (평범하게 전달)

obj = {name:'길동', age: 30}
<자식 obj={obj} />

 

자식 컴포넌트에서 받을 때 (속성 명시)

// props에 들어있는 값 : props.item.name, props.item.age
const 자식 = ({item:{name, age}}) => {}

중첩되지 않은 객체는 `{name, age}` 처럼 바로 받을 수 있지만 중첩된 객체를 할당하려면 중첩된 객체의 속성명을 명시하고, 한 번 더 구조분해를 시켜버리면 된다. 중첩 레벨에 상관없이 계속해서 사용할 수 있다. 

 

 

📍 (3) - 구조 분해 두 번 하기

개인적으로 가독성이 제일 좋은 방법인 것 같으나, 코드를 한 줄 더 써야한다. 

 

부모 컴포넌트에서 전달할 때 (평범하게 전달)

obj = {name:'길동', age: 30}
<자식 obj={obj} />

 

자식 컴포넌트에서 받을 때 (한 번 더 할당하기)

const 자식 = ({item}) => {
  const {name, age} = item;
}

우리가 알고 있는 1차원 구조분해할당을 두 번하면 된다. 

---

💡 정리

• 중첩객체를 구조분해하려면 여러가지 방법이 있다. 
• 그 중 마음에 드는거 선택해서 골라쓰자. 
• 단 다른 사람이 작성한 코드를 볼 줄도 알아야하니 알고는 있어야 한다.