파일 연결하는 방법

HTML, CSS, Javascript를 작성하는 소스코드 파일을 따로 만들고 연결할 때, import와 export를 이용한다.

import 사용법

import {aaa, bbb, ccc} from '파일명'

export const aaa = "aaa"
export const bbb = "bbb"
export const ccc = "ccc"

import/export 예시

1. index.js 파일에 myPage.js 파일에 있는 Wrapper 컴포넌트를 import해서 사용하는 코드이다.

/*index.js*/
import {Wrapper} from "../../../styles/myPage"

export default function myPage() {
  return (
    <Wrapper>
      ...

2. Wrapper에 대한 CSS를 정의하고 export한 코드이다.
   Wrapper를 사용할 문서에서 import 받아서 사용할 수 있다.

/*myPage.js*/
export const Wrapper = styled.div`
border: 1px solid gray;
`