[React] props와 구조분해할당

List 컴포넌트에서 dummyList를 받아 화면에 표시하기 위해서, App 컴포넌트에서 list라는 이름으로 dummyList를 props로 넘겨주었다.

const dummyList = [
  {
    id: 1,
    content: 'test1',
  },
  {
    id: 2,
    content: 'test2',
  },
  {
    id: 3,
    content: 'test3',
  },
];

function App() {
  return (
    <div className='App'>
      <List list={dummyList}/>
    </div>
  );
}

export default App;

const List = (list) => {
  return (
    <div className='List'>
      {list.map((i) => {
        return <div>{i.content}</div>;
      })}
    </div>
  );
};

export default List;

그런데 이렇게 했을 때, TypeError: list.map is not a function 에러가 떴다.

콘솔로 찍어보니 배열 List가 객체로 한 번 더 쌓인 후 반환되고 있었다. props는 객체형태로 전달되기 때문이다.

{List: Array(3)}  
List: Array(3)  
0: {id: 1, content: 'test1'}  
1: {id: 2, content: 'test2'}  
2: {id: 3, content: 'test3'}

즉, {list : [{id: 1, content: 'test1'},{id: 2, content: 'test2'},{id: 3, content: 'test3'}]} 의 형태로 props가 반환되었고, 객체에는 map 메서드가 없기 때문에 TypeError가 떴던 것이다. 그래서 점표기법을 한 번 더 사용하여 depth를 한 번 더 들어가도록 수정했다.

const List = (list) => {
  return (
    <div className='List'>
      //수정한 부분
      {list.list.map((i) => {
        return <div>{i.content}</div>;
      })}
    </div>
  );
};

export default List;

이렇게 수정하면 다음과 같이 정상적으로 return 되는 것을 확인할 수 있다.

하지만 depth를 두 번 들어가는 건 보기에도 좋지 않고, 번거로워 보였다.
그래서 구조분해할당을 이용해서 가장 바깥의 객체 껍질을 벗겨보았다.

//수정한 부분
const List = ({ list }) => {
  return (
    <div className='List'>
    //한 번만 들어가도 되도록 
      {list.map((i) => {
        return <div>{i.content}</div>;
      })}
    </div>
  );
};

export default List;

정상적으로 리턴되는 것을 확인할 수 있다.

콘솔로 list를 출력해보았다. list에는 더이상 객체가 아닌 배열이 담겨있다.

[{…}, {…}, {…}]

---

정리

 

기존 코드가

list = {list : [{id: 1, content: 'test1'},{id: 2, content: 'test2'},{id: 3, content: 'test3'}]} 였다면,

코드를

{ list } = {list : [{id: 1, content: 'test1'},{id: 2, content: 'test2'},{id: 3, content: 'test3'}]} 로 수정하였다.

이렇게 되면 비구조화할당을 통해서 변수 list에 변수 list와 같은 이름의 키(list)의 값이 할당되어 list에 [{id: 1, content: 'test1'},{id: 2, content: 'test2'},{id: 3, content: 'test3'}]가 할당되는 것이다.