[React] 로컬에서 데이터 로직에 대한 고민

개발이라고 해야할지, 퍼블리싱이라고 해야할지 그런 일을 리액트로 작업하고 있는데 한, 두개가 아닌 수십개의 이미지를 어떻게 하면 하드코드하지 않고 로직을 만들어서 브라우저에 띄울 수 있을까에 대한 고민과 이를 풀어낸 과정.

 

 

---

 

적은 개수의 이미지 같은 경우엔 src 폴더 안에 img 폴더를 따로 만들고 여기에서 해당 이미지를 import 해서 사용했는데 구글링을 해보니까 이미지 같은 경우는 굳이 import를 하지 않아도 public 폴더 안에 assets 폴더를 만들고 여기에 이미지를 넣어 <img src="/assets/이미지" />로 사용할 수 있더라.

 

 

• 이미지를 컴포넌트에 직접 import해서 사용했던 방식

import React from 'react';
import dropdown from 'img/btn_dropdown.svg';

const Category = () => {

return (
    <>
      <div>
        Category
        <div>
          <img src={dropdown} alt="드롭다운 버튼" />
        </div>
      </div>
      .
      .
    </>
  );
};

 

• public / assets로 이미지 경로를 수정

public
  > assets
    > btn_dropdown.svg

const Category = () => {

  return (
    <>
      <div>
        Category
        <div>
          <img src="/assets/btn_dropdown.svg" alt="드롭다운 버튼" />
        </div>
      </div>
      .
      .
    </>
  );
};

 

 

 

 

이제 본격적으로 고민했던 부분. 컴포넌트에 들어가는 데이터만 다르게 하면 따로 컴포넌트로 만들어서 재사용할 수 있을 거 같다는 판단이 됐는데 API를 이용해서 데이터를 받아오는 게 아니라 어떻게 하면 로컬에서 데이터에 대한 로직을 짜서 구현할 수 있을까. 

 

그래서 내가 생각한 건, 데이터를 배열로 만들어서 각각의 항목을 객체로 정리한다. 

/*
src
  > data
    > Works.js
*/

const Works = [
  {
    id: 1,
    title_array: [
      '제목',
      '제목',
      '제목',
    ],
    client: '작가',
    category: '분류',
    published_year: 2021,
    description: [
      '설명',
      '설명',
      '설명'
    ],
    img_count: 12
  },
 .
 .
];

export default Works;

 

 

+ 이후에 구글링을 조금 더 해보고 다른 분께 조언을 받아 로컬 자체에서 .json 파일 형식으로 쓰는 것에 fetch로 데이터를 가져오지 않고 배열로 만든 것과 동일하게 import해서 사용할 수 있다는 걸 알게 되었다. 그래서 데이터 파일의 확장자를 .js 대신 .json을 사용하고 변수와 export를 제거하고 사용

//Works.json

[
  {
    id: 1,
    title_array: [
      '제목',
      '제목',
      '제목',
    ],
    client: '작가',
    category: '분류',
    published_year: 2021,
    description: [
      '설명',
      '설명',
      '설명'
    ],
    img_count: 12
  },
 .
 .
];

 

 

위와 같이 만든 데이터 형식을 import해서 사용

// WorkDetail.js

import React from 'react';
import WorkData from 'data/Works'; // 직접 만든 데이터 import

const WorkDetail = () => {

  return (
    <main>
      <header>
        {content.title_array.map((title, index) => (
            <h1 key={index}>{title}</h1>
        ))}
      </header>
      <section>
        <article>
          <ul>
            <li>
              <p>Client</p>
              <p>{content.client}</p>
            </li>
            .
            .
          </ul>
          <div>
            {content.description.map((desc, index) => (
              <p key={index}>{desc}</p>
            ))}
          </div>
        </article>
        <article>
          {이미지 넣을 부분}
        </article>
      </section>
    </main>
  );
};

컴포넌트에 만든 직접 만든 데이터를 import해서 쓰는 방식으로 코드를 구현했다. 데이터 형식만 맞게 넣어주면 일일이 코드를 쓰지 않아도 되고 만약 수정해야할 사향이 있으면 만든 데이터 파일에 들어가서 그 부분만 수정해주면 되니까.

 

 

이미지 파일의 경우, 데이터 파일에 이미지를 전부 import해서 쓰자니 그 코드의 양이 어마어마해지니까 그건 좋지 않을 것 같고, 또 이미지의 개수가 일정하지 않기 때문에 데이터 파일(Works.js)에 이미지의 개수(img_count)의 키를 만들고 그 값을 넣어준다. 이미지의 개수만큼 비어있는 배열을 만들고 이 배열의 인덱스를 이용해서 이미지를 보여주는 방법을 선택했다.

 

직접 만든 데이터에서 key 'client'의 값과 각각 폴더의 이름을 동일하게 설정하고 이미지 파일의 이름을 숫자로 정리해서 다음과 같이 코드로 구현.

// {이미지 넣을 부분}의 코드
{Array.from({ length: `${content.img_count}` }).map((_, index) => (
  <div key={index}>
    <img
      src={`/assets/Works/${content.client}/${index + 1}.jpg`}
      alt={content.title}
      loading="lazy"
      decoding="async"
    />
  </div>
))}

 

 

 

 

---

 

 

어떻게든 같은 형식으로 데이터를 나열하면 되기 때문에 하드코드하고 싶지 않았다. 정리만 잘해서 나열하면 컴포넌트를 재사용할 수 있을 거 같았는데, 토이 프로젝트 시에는 외부 API를 이용해서 fetch로 데이터를 받아와서 구현했다면 로컬 자체적으로 데이터를 넣고 할 때는 어떻게 하면 이 컴포넌트를 재사용할 수 있을까 고민했던 부분. 현재 내 지식으로는 이렇게 해결을 했다.

 

로컬에서 json을 직접 만들어 사용해보면서 과연 백엔드에서는 API의 데이터를 어떻게 만들까라는 궁금증이 생겼다. 코드에 대해 조언을 들었을 때 이미지의 수를 세서 그 파일을 map을 써서 보여주는 게 아니라 json 안에다가 이미지 경로를 다 적고 가져오는 게 어떻겠느냐 라는 말을 들었는데 그렇게 하려다가 '나는 코드를 적게 쓰고 싶어서 파일을 저렇게 정리한건데 이미지경로를 json 안에다가 다 쓰면 의미가 없지 않나' 라는 생각이 들어서 우선 원래 썼던 코드 그대로 두었다. 아마 어떤 프로그램을 써서 설정하면 코드를 자동으로 생성해주는 그런 걸 사용하는 걸까 싶기도 하고. 이미지가 수백장일 때에 사람이 저 이미지의 경로를 한땀한땀 하드코드 하진 않을 거 같은데.