다른 폴더의 파일 불러오기

하나의 소스코드에 너무 많은 코드를 작성할 경우 너무 복잡해질 뿐만 아니라 한계가 있기 때문에 React에서는 html, css, javascript를 작성하는 소스코드를 따로 만들고 import와 export를 사용하여 필요에 따라 불러와서 사용할 수 있다. 이는 자바스크립트에서 모듈(module)이라는 기능을 지원하기 때문이다.

여기서 모듈(module)은 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져있는 형태를 의미한다.

접근 방법

1. 파일경로를 직접 접근하여 import

	import Page001 from "./Page/Page001";

2. 폴더 내부에 index.js 파일을 생성하여 import

import {
    Main,
    Posting,
    Info,
    InfoDetail,
    InfoInput,
    Title,
    Contents,
    InputContents,
    Address,
    InputAddress,
    AddressButton,
    Youtube,
    Pic,
    PicBox,
    PicAdd,
    MainOption,
    RadioButton,
    InputRadio,
    Register
} from '../../styles/index'

📌 파일 경로에 직접 접근하는 것보다는 폴더 내부에 index.js 파일을 생성하여 import하는 방법을 많이 사용함!!