[React] 특정 디렉토리 내의 파일 불러오기

요즘 리액트를 만져보는 중이다. 그날그날의 팁 또는 조각 지식들을 적어보려고 한다. 

(그날 썼던 코드를 적어두는 것이니 혹시 더 좋은 방법이 있다면 알려주세요..)

 

 

디렉토리 내의 파일을 불러올 때 파일 경로를 라이브러리 임포트 하듯이 불러와야했고, 안그러면 에러도 뜨지 않고 조용히 에러가 발생했다.

본인의 경우에는 tsv와 이미지 파일을 불러와야 했다. 

tsv 파일 불러오기

import { useEffect, useState } from 'react';
import DB from "./db.tsv"

...

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(DB);
      const text = await response.text();
      const rows = text.trim().split("\n");
      const data = rows
        .map((line) => {
          const [ item_id, id, question, answer] = line.split("\t");
          return { item_id, id, question, answer };
        })
	.filter((item) => item.item === itemId)
        .map((item) => ({ id: item.id, question: item.question, answer: item.answer }));
      
      setQuestions(data);
    }

    fetchData();
  }, [itemId]); 

...

tsv 파일을 미리 DB라는 변수를 활용하여 불러오고, 함수에서는 fetch(DB)와 같은 방식으로 사용하고 있다.

위의 코드에서는 item id를 기준으로 tsv를 필터링했다.

 

 

 

여러 이미지 파일 불러오기

한 디렉토리 밑에 여러개의 이미지 파일들이 있었는데 여러개의 파일들을 하나로 압축해주는 도구인 웹팩을 사용해서 이미지들을 불러왔다. 

function showImage({ imagePath, altText }) {
  const images = {};
  const imageFiles = require.context('./db/image', false, /\.(png|jpe?g|svg)$/);

  imageFiles.keys().forEach(key => {
    images[key] = imageFiles(key);
  });

  return <img src={images[`./${imagePath}`]} alt={altText} />;
}