React 강좌 tutorial 2 - 공통 컴포넌트 만들기 (웹툰서비스 만들기)

이번장에서는 헤더와 푸터, GNB등 공통으로 사용되는 컴포넌트를 만들어 보겠습니다.

별 역할이 필요없는 애들이기 때문에 함수형 컴포넌트로 만들어 줍니다.

/src/component/

	import React from 'react';
	const Footer = () => (
	<div className="footer">
	© My Company Name.
	</div>
	)
	export default Footer;

view raw Footer.js hosted with ❤ by GitHub

	import React from 'react';
	const Gnb = () => (
	<ul className="gnb">
	<li>
	<a href="#none" className="tab_day on">월요일</a>
	</li>
	<li>
	<a href="#none" className="tab_day">화요일</a>
	</li>
	<li>
	<a href="#none" className="tab_day">수요일</a>
	</li>
	</ul>
	)
	export default Gnb;

view raw Gnb.js hosted with ❤ by GitHub

	import React from 'react';
	const Header = () => (
	<div className="header">
	WEBTOON
	</div>
	)
	export default Header;

view raw Header.js hosted with ❤ by GitHub

Header 와 Footer를 간단하게 만들어 주시고,

Gnb는 사실 요일탭인데 그냥 간단하게 3개만 만들었습니다.

메인 페이지(Main)와 웹툰 상세페이지(WebtoonHome)에 헤더, 푸터, GNB를 넣어줍니다.

/src/component/Main.js

	import React, { Component } from 'react';
	import Header from "../component/Header";
	import Gnb from "../component/Gnb";
	import Footer from "../component/Footer";
	class Main extends Component{
	render(){
	return (
	<div>
	<Header />
	<Gnb />
	Main
	<Footer />
	</div>
	)
	}
	}
	export default Main;

view raw Main.js hosted with ❤ by GitHub

	import React, { Component } from 'react';
	import Header from "../component/Header";
	import Gnb from "../component/Gnb";
	import Footer from "../component/Footer";
	class WebtoonHome extends Component{
	render(){
	return (
	<div>
	<Header />
	<Gnb />
	WebtoonHome
	<Footer />
	</div>
	)
	}
	}
	export default WebtoonHome;

view raw WebtoonHome.js hosted with ❤ by GitHub

이런 화면이 나왔네요.

이번 강의의 모든 코드는 Github : tutorial_02 에서 확인하실 수 있습니다.

다음편 : React 강좌 tutorial 3 - 메인 페이지 (웹툰서비스 만들기)