React에서는 HTML과 달리 link, script 대신 'import / export'를 쓴다.

HTML 파일과 CSS 파일, Javascript 파일을 따로 관리하는 것 처럼,
React도 여러 js 형태의 파일로 따로 관리할 수 있다.
따로 관리하고 있는 파일들을 서로 연결해주기 위해 import, export를 사용한다.

1. import/export란?

import

export가 내보내준 모듈을 가져오는 기능을 한다.

import {Wrapper} from '../styles/emotion'

1) import를 써준다.
2) export 받을 함수를 { } 안에 써준다.
3) from을 써준 후, ' ' 안에 가져올 파일 경로를 써준다.

export

변수, 함수, 클래스 앞에 export를 사용하여 모듈 기능을 다른 파일에서 사용할 수 있도록 내보내는 기능을 한다.

export default function Board ( ) { }

1) export를 써준 후 바로 뒤에 default를 써준다.
2) 정의할 함수를 써준 후, { } 안에 Javascripts, HTML 요소를 써준다.
(HTML 요소는 return ( ) 안에 작성)

2. import/export 활용하기

index.js 파일에 HTML 구조 작성, emotion.js 파일에 CSS 요소 작성 예시

index.js

import {Wrapper} from '../styles/emotion'

export default function Board() {
	
    return (
    	<Wrapper>
        	안녕하세요
        </Wrapper>
     )
 }

emotion.js

import styled from '@emotion/styled'

export const Wrapper = styled.div `
	margin : 10px;
    background-color: #FFFFFF
`