10. styledComponents 적용하기

# styledComponents를 적용하여 프로그래밍을 진행

 

styledComponents를 적용하여 프로그램을 구성하게 되면 장점은 js 파일안에서 간단한 문법으로 css까지 구현 가능하다. 한마디로 js 파일에서 css, javascript, html 까지 모두 하나의 페이지에서 구현이 가능하므로, 코드의 흐름을 파악하거나 가독성 측면에서 개선이 가능하다.

 

Components 스타일로 구성하기

Components 스타일로 구성하게 되면 일단 재사용 가능한 Components들을 따로 나누어 적용이 가능하므로 코드가 간결해지고 가독성이 높아지는 효과가 있다. 보통은 헤더나 푸터 바디 정도로 나눌수 있는데 아래는 나눈 결과 이다.

 

1. 파일 구성 보기

2. App.js

import LoginPage from './pages/LoginPage';

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

export default App;

3. src → components → 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;

4. src → components (Footer.js, Header.js)

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>메뉴 1</li>
        <li>메뉴 2</li>
      </ul>
    </FooterList>
  );
};

export default Footer;

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>오시는 길 : 서울 강남구.....</li>
        <li>전화번호 : 02-200-20000</li>
      </ul>
    </HeaderList>
  );
};

export default Header;

5. 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;

6. 결과 화면

Header, Body, Footer 로 나누어 화면에 뿌려지는것을 확인 할 수 있다.