React(9) - 페이지 구성하기

[주인장]

* Header.js

import React from 'react';

import { styled } from 'styled-components';

// 하나의 컴포넌트를 생성(재사용 가능)

// styled-components를 사용하여 js와 css를 함께 사용할 수 있음

const HeaderList = styled.div`

  border: 1px solid red;

  height: 150px;

`;

const Header = () => {

  return (

    <HeaderList>

      <ul>

        <li>Home</li>

        <li>About</li>

        <li>Contact</li>

      </ul>

    </HeaderList>

  );

};

export default Header;

* Footer.js

import React from 'react';

import { styled } from 'styled-components';

const FooterList = styled.div`

  border: 1px solid blue;

  height: 150px;

  color: blue;

`;

const Footer = () => {

  return (

    <FooterList>

      <ul>

        <li>오시는 길 : 인천 남동구 호구포로 803</li>

        <li>이메일 : kkt@inhatc.ac.kr</li>

        <li>작성자 : 김기태</li>

      </ul>

    </FooterList>

  );

};

export default Footer;

* Login.js

import React from 'react';

import { styled } from 'styled-components';

const LoginBox = styled.div`

  padding: 30 30 30 30;  

  border: 1px solid #dcdcdc;

`;

const Login = () => {

  return (

    <LoginBox>

      <h1>로그인 페이지 입니다. </h1>

    </LoginBox>

  );

};

export default Login;

* LoginPage.js

import React from 'react';

import Header from './../components/Header';

import Login from '../components/login/Login';

import Footer from './../components/Footer';

const LoginPage = () => {

  return (

    <div>

      <Header />

      <Login />

      <Footer />

    </div>

  );

};

export default LoginPage;

* App.js

import './App.css';

import LoginPage from './pages/LoginPage';

function App() {

  return (

    <div>

      <LoginPage />

    </div>

  );

}

export default App;

<<  결과 >>