Import/Export

Park Bumsoo·2022년 3월 19일
0

1. 기존 HTML과 React 구조의 차이


위는 일반적은 HTML의 구조로 css/html/js 파일로 나뉘며
//<link rel="" href"">를 사용하여 파일을 서로 연동하거나
html 자체에 style 이나 script 구간은 헤더부분에 선언해서 사용한다.

하지만 React는 기존에 사용하던 방식과는 다른 구조를 보인다.
이에따라 JSX라는 Javascript확장 문법을 주로 사용하게된다.
JSX구조에서는 node.js라는 Javascript runtime 확장 기능을 사용이 가능하며 export와 import를 통해 보다 편하고 깔끔하게 파일을 참조해 올 수 있게 되었다.

2. Export 와 Import

Export는 모듈에서 다른 파일및 모듈에 접근할 수 있게 하기위해 사용 된다.

이때 형식은

export default function Example(){

	return
    
}

을 기본형태로 사용하며 다른 형태로는

const Example = () => {

	return
    
}

export default person;

등이 사용된다.

ImportExport한 내용을 가져올 때 사용되며

	import Example from "위치" 

의 형태로 사용된다.

profile
프론트엔드 주니어 개발자(React, Next.js)

0개의 댓글