[React] 리스트 데이터 동적 출력과 스프레드 문법

🤔 들어가며

리액트 개념들을 탄탄히 다지면서 개인 프로젝트를 진행하고 있다. 진행중에 있어서 data.js 라는 파일 안에 객체 배열이 들어있다. 각 항목들을 컴포넌트에 전달하는 데 전개연산자를 사용하여 컴포넌트에 속성을 전달해 주다 머릿속으로 잘 그려지지 않아 글을 쓰게 되었다

✏️ 문제점

밑에 있는 코드와 같이 ...item을 사용하게 될 시 CORE_CONCEPTS 안에 있는 객체 배열들이 차례대로 출력이 되었다.

import { CoreConcept } from '@/components';
import { CORE_CONCEPTS } from '../../data.js';
export const CoreConcepts = () => {
  return (
    <section id="core-concepts">
      <h2>Core Concepts</h2>
      <ul>
        {CORE_CONCEPTS.map((item) => (
          <CoreConcept key={item.title} {...item} />
        ))}
      </ul>
    </section>
  );
};

밑에 파일은 data.js 파일들이다. 우선 기본적인 전개연산자 개념부터 간단하게 설명하고 넘아가도록 하겠다.

{
    image: componentsImg,
    title: 'Components',
    description:
      'The core UI building block - compose the user interface by combining multiple components.'
  },
  {
    image: jsxImg,
    title: 'JSX',
    description:
      'Return (potentially dynamic) HTML(ish) code to define the actual markup that will be rendered.'
  },

전개연산자(Spread Operator)

가장 기본적인 개념부터 간단하게 짚고 넘어가겠다. ...arr를 사용하게 되면 이터러블 객체 arr이 인수 목록으로 '확장'이 된다. 즉 펼쳐주는 개념으로 생각하면 쉽다.

let arr = [3, 5, 1];

alert( Math.max(...arr) ); // 5

배열이 꼭 아니더라도 이터러블 객체면 전개 구문을 사용할 수 있다.

let str = "Hello";

alert( [...str] ); // H,e,l,l,o

CoreConcept(컴포넌트)

{ image, description, title } 는 전개연산자(spread operator)를 사용하여 컴포넌트에 속성을 전달해 주는 역할을 한다. 컴포넌트에서 props 객체를 통해 image, description, title 를 직접 참조할 수 있다.

export const CoreConcept = ({ image, description, title }) => {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
};

App.jsx

CoreConcept 컴포넌트를 불러온 후 CORE_CONCEPTS 라는 data.js에 저장되어 있는 배열 정보들을 불러온다. 하지만 아래 코드와 같이 컴포넌트가 반복적으로 불러지고 있는데 간결하게 코드를 바꾸고싶다. 이 때 사용한 것이 map을 사용하여 ListRendering 을 해주었다.

map을 사용하기 전 코드

<section id="core-concepts">
<h2>Core Concepts</h2>
<ul>
  <CoreConcept
    title={CORE_CONCEPTS[0].title}
    description={CORE_CONCEPTS[0].description}
    image={CORE_CONCEPTS[0].image}
  />
  <CoreConcept {...CORE_CONCEPTS[1]} />
  <CoreConcept {...CORE_CONCEPTS[2]} />
  <CoreConcept {...CORE_CONCEPTS[3]} />
  {CORE_CONCEPTS.map((item) => (
    <CoreConcept key={item.title} {...item} />
  ))}
</ul>
</section>

map을 사용한 코드

<section id="core-concepts">
      <h2>Core Concepts</h2>
      <ul>
        {CORE_CONCEPTS.map((item) => (
          <CoreConcept key={item.title} {...item} />
        ))}
      </ul>
    </section>

여기서 ...item 은 전개연산자를 사용하여 item객체의 속성들을 펼쳐서 각 속성을 개별적인 prop에 전달하는 역할을 한다. CORE_CONCEPTS.map 함수는 item 배열의 각 요소를 순회하면서 해당 요소에 대해 item을 생성한다.

위에서 보여준 data.js에 구조와 같이 item은 다음과 같은 구조를 갖고 있다.

{
  image: '이미지 경로',
  title: '타이틀 문자열',
  description: '설명 문자열'
}

...item은 이를 다음과 같이 펼쳐서 전개한다.

<CoreConcept key={item.title} image={item.image} title={item.title} description={item.description} />

여기서 key prop은 각 요소를 식별하기 위한 유일한 키이며, {...item}을 통해 나머지 속성들은 CoreConcept 컴포넌트에 각각의 prop으로 전달된다. 예를 들어, item.title은 title prop으로, item.image는 image prop으로 전달되어 CoreConcept 컴포넌트에서 참조된다.

이를 통해 CoreConcept 컴포넌트는 image, title, description 등의 속성을 받아와서 UI를 렌더링할 수 있습니다. 전개 연산자를 사용하면 코드를 간결하게 작성할 수 있고, item의 구조가 변경되더라도 해당 컴포넌트를 수정할 필요가 없어진다.

---

참고사이트 : Javascript 코어