[React] styled-components를 사용한 웹페이지 예시

- 각 기능별 컴포넌트 분리해서 사용

// App.js

import './App.css'; 
import LoginPage from './pages/LoginPage';

function App() {
    
    return ( 
        <div> 
            <LoginPage />
        </div>
    );
};

export default App;

// pages/LoginPage.js

import React from 'react';
import Footer from '../components/Footer';
import Header from '../components/Header';
import Login from '../components/login/Login';

const LoginPage = () => {
    return (
        <div>
            <Header />
            <Login />
            <Footer />
        </div>
    );
};

export default LoginPage;

// components/Header.js

import React from 'react';
import styledComponents from 'styled-components';

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

// styled-components => js파일과 css파일 관리 편함!
const HeaderList = styledComponents.div`
    border: 1px solid black;
    height: 300px;
`;

const Header = () => {
    return (
        <HeaderList>
            <ul>
                <li>메뉴1</li>
                <li>메뉴2</li>
            </ul>
        </HeaderList>
    );
};

export default Header;

// components/Footer.js

import React from 'react';
import styledComponents from 'styled-components';

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

// styled-components => js파일과 css파일 관리 편함!
const FooterList = styledComponents.div`
    border: 1px solid black;
    height: 300px;
`;

const Footer = () => {
    return (
        <FooterList>
            <ul>
                <li>오시는길 : 서울 강서구...</li>
                <li>전화번호 : 0202121</li>
            </ul>
        </FooterList>
    );
};

export default Footer;

// components/login/Login.js

import React from 'react';
import styledComponents from 'styled-components';

const LoginBox = styledComponents.div`
    padding: 30px 0 30px 0;
`;

const Login = () => {
    return (
        <LoginBox>
            <h1>로그인 페이지입니다</h1>
        </LoginBox>
    );
};

export default Login;

 

디렉토리 분류

 

- 결과 화면