Next.js, React.js export해서 변수 데이터 사용하기

약 400~500개의 라면 데이터가 있는데, 100개정도의 데이터는 사진파일이 존재하지 않았다.

 

그래서 사진파일이 없는경우, onError로 처리해주다가 500에러 문제로 좀더 근본적으로 처리하려고 했는데

 

현직 개발자 분에게 상담했더니 이런경우는 백엔드에서 데이터가 없는파일은 없다고 처리를 해주는게 맞다고 하신다.

 

근데 지금 프로젝트 진행과정상, 다시 데이터 정리하기도 시간이 얼마없고 백엔드 담당하는 친구가 거의 한명인 상황

 

급하게 사진파일이 없는 녀석을 처리해줄 필요가 있었다.

 

500에러를 신경쓰지 않으면 그냥 진행하면 되지만, 그 에러가 보기싫어 사진파일이 없는 데이터를

 

배열로 만들어주어 처리했다. 그 때 사용한 export문법

 

data.js

let doc = [
  "7가지 채소가득 우리밀라면.png",
  "CJ가쓰오우동 한그릇.png",
  "CJ얼큰우동 한그릇.png",
  "Gamer'z cup 힐러 고기짬뽕.png",
  "NEW 공화춘곱빼기.png",
  "NEW 공화춘자장컵.png",
  "default.png",
  "gomgom호로록매콤라면.png",
  "gomgom호로록짜장라면.png",
  "gomgom호로록짬뽕라면.png",
  "生生(생생)우동.png",
  "간짬뽕.png",
  
  .........
  
    "해물짬뽕.png",
  "해장의신 속풀라면.png",
  "핵불닭볶음면.png",
  "홍석천‘S 홍라면 매운치즈볶음면.png",
  "후루룩국수.png",
  "후루룩칼국수.png",

]

export default doc

이와같이 변수를 만들어주고 해당 변수를 export default 변수명으로 내보내 주면 끝이다.

 

그리고 가져올 때는

 

ResultBox.js

import DocData from "../main/data";

......


export default function ResultBox(props) {
  let docc = DocData;
  
  .....
  
    return (
    <>
    
    ...
    
            {docc.includes(`${props.ramenName}`) ? (
          <Link href={`/ramen/${props.id}`}>
            <div className="explain">
              <img
                src={props.image}
                onError={handleImage}
                width={150}
                alt="제품이미지"
              ></img>
            </div>
          </Link>
        ) : (
          <Link href={`/ramen/${props.id}`}>
            <div className="explain">
              <img
                src="ramen/default.png"
                onError={handleImage}
                width={150}
                alt="제품이미지"
              ></img>
            </div>
          </Link>
        )}
        
        ....

이와같이 import로 가져온다음 해당페이지에 존재하는 변수처럼 그대로 사용해주면된다.

 

includes()메서드와 함께 사용해 주었다.

 

- 요약

1.외부파일로 export default 변수명 으로 만들어주고

2.import해서 사용한다.