JSX 문법으로 랜더링 하기

리액트 에서는 html 을 jsx 형태로 랜더링 할 수 있다.

예를들어 아래와 같이 간단하게 확인 해 볼 수 있다.

	import React from "react"; // NodeJS 로 설치 한 React default 모듈을 임포트 한다.
	function App() { // App 컴포넌트 생성
	return <div>hello world!</div>; // DOM 랜더링
	}
	export default App; // App 컴포넌트 함수를 default 로 내보낸다.

view raw App.js hosted with ❤ by GitHub

이후 에 해당 컴포넌트를 분류 불러 오려면 아래 와 같이 불러 올 수 있다.

먼저 src 폴더에 js 파일을 생성하고 Header.js 파일을 만들자

그 다음 App.js 파일에다가 임포트 하여 사용 할 수 있다.

	import React from "react"; // NodeJS 로 설치 한 React default 모듈을 임포트 한다.
	import Header from "./Header"; // new
	// App 컴포넌트 생성
	function App() {
	return (
	<div>
	<Header /> {/* new */}
	hello world
	</div>
	); // DOM 랜더링
	}
	export default App; // App 컴포넌트 함수를 default 로 내보낸다.

view raw App.js hosted with ❤ by GitHub

	import React from "react";
	function Header() {
	return <header>헤더 영역</header>;
	}
	export default Header;

view raw Header.js hosted with ❤ by GitHub