style-component

style-component

• Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리입니다.

• 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부릅니다.

• css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있습니다

설치

터미널에 아래처럼 작성
npm install --save styled-components

만약 yarn으로 설치할경우
1)npm으로 yarn설치
npm install -g yarn

2)yarn 설치 확인
yarn -verction

3)styled-components 설치
yarn add styled-components

확장프로그램 다운받으면 styled-components자동완성 사용 가능

사용해보기

< 참고>
styled.h1 == document.createElement('h1')

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

function App() {
  return (
    <div>
    	 <Title>안녕</Title>
    </div>
  );
  }

js파일에 css와 함께 컴포넌트화

Header.js

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

//하나의 컴포넌트를 생성함
//왜?재사용할려고 만듦

const HeaderList = styled.div`
    border:1px solid black ;
    height: 300px;
`;

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

export default Header;

Footer.js

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

const FooterList = styled.div`
    border:1px solid black ;
    height: 300px;
`;

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

export default Footer;

Login.js

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

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


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

export default Login;

App.js

function App() {
  return (
    <div>
		<Header />
      <Login/>
      <Footer/> 
    </div>
    )
    };

여러개의 컴포넌트들이 모여 하나의 페이지를 만든다.