구조분해할당을 통해 가독성을 높이자

서론

React 프로젝트에서 map 메서드를 활용할 때, 데이터를 다루는 방식에 따라 코드의 가독성이나 유지보수성에 큰 영향을 끼친다.
특히, 객체 데이터를 반복적으로 참조해야 하는 경우, 구조 분해 할당(Destructuring Assignment) 을 사용해서 가독성을 늘리는 걸 습관으로 하는 게 좋다고 생각한다.
이 번 프로젝트를 하면서 나온 예시를 통해 공부해보자

변환 전 코드

아래 코드는 React의 map 메서드를 활용하여 국가 데이터를 리스트로 렌더링한다.
하지만 각 속성을 참조할 때마다 data라는 객체를 사용해야되기 때문에 조금 가독성이 떨어질 수 있다.(더 복잡해진다면)

{sortOption(listedCountry).map((data) => (
  <li className='list-item' key={data.id}>
    <span>{data.country}</span>
    <span>{data.goldmedal}</span>
    <span>{data.silvermedal}</span>
    <span>{data.bronzemedal}</span>
    <span>
      <button onClick={() => handleDeleteList(data.id)}>삭제</button>
    </span>
  </li>
))}

구조 분해 할당 적용

{sortOption(listedCountry).map(({ id, country, goldmedal, silvermedal, bronzemedal }) => (
  <li className='list-item' key={id}>
    <span>{country}</span>
    <span>{goldmedal}</span>
    <span>{silvermedal}</span>
    <span>{bronzemedal}</span>
    <span>
      <button onClick={() => handleDeleteList(id)}>삭제</button>
    </span>
  </li>
))}

지금의 예시는 복잡하지 않아서 크게? 가독성이 좋아져 보이지는 않지만, 중첩된 구조를 다루게 된다면 가독성이 훨 좋아질 수 있다.