React-Quiz 만들기 [6] : import export 이용

import export 이용하여 파일 분리하기

파일을 여러 개로 분리할 때 사용한다. 코드가 길어질 수록 수정하기가 번거롭고 어려워진다.

컴포넌트 단위로 코드를 분리하는 것을 습관화 하자

 

 

---

모듈

분리된 파일의 이름을 모듈(module)이라 한다.

모듈 내에는 함수, 변수 등 코드에서 사용하는 모든 것들이 있을 수 있다.

• 모듈 내에 있는 값을 내보낼땐 export
• 다른 모듈에서 값을 불러올땐 import

 

퀴즈 문항 분리하기

App.js에 있는 quizzes를 대문자로 변경 후 다른 모듈로 내보내기위해 export 한다.

※ 대문자 변경 하는 이유 : 전체 어플리케이션에서 변하지 않는 값은 js에서 대문자로 표현한다.

 

const QUIZZES = 
[
  {
    id:1,
    question: "나는 몇 학년일까요?",
    answers: 
    [
      {text: "1학년", isCorrect: false},
      {text: "2학년", isCorrect: false},
      {text: "3학년", isCorrect: false},
      {text: "4학년", isCorrect: true},
    ],
  },
 
  {
    id:2,
    question: "나는 몇 살일까요?",
    answers: 
    [
      {text: "21살", isCorrect:false },
      {text: "22살", isCorrect:false },
      {text: "23살", isCorrect:false },
      {text: "24살", isCorrect:true },
    ],
  },
 
  {
    id:3,
    question: "나는 어디에 살까요?",
    answers: 
    [
      {text: "수원", isCorrect:false },
      {text: "대구", isCorrect:false },
      {text: "서울", isCorrect:true },
      {text: "부산", isCorrect:false },
    ],
  }
]
 
export {QUIZZES};

 

import { QUIZZES } from "./constants";
..
<div className = "question-section">
          <h1 className="question-header">
            <span>{QUIZZES[currentNo].id}</span>/{QUIZZES.length}
          </h1>
            <div className="question-text">{QUIZZES[currentNo].question}</div>
          </div>
          <div className="answer-section">
            {QUIZZES[currentNo].answers.map((answer)=>(
...