[React] Styled-Components

개요

1. className 을 지정하여 , 별도의 css파일에서 Styled를 지정하는 방법.

  <div>'

        <a href="https://vitejs.dev" target="_blank">

          <img src={viteLogo} className="logo" alt="Vite logo" />

        </a>

      </div>

하나의 예시로 className은 logo로 지정되어 있기에 상단에서

import './App.css'

App.css 파일을 import 하고 있기에, 

.logo {

  height: 6em;

  padding: 1.5em;

  will-change: filter;

  transition: filter 300ms;

}

 

App.css에서는 이러한 className에 대한 styled가 정의되어 있기에 표시가 되어집니다.

2. key-value로 직접적으로 style값을 지정해주는 것 

<a href="https://vitejs.dev" target="_blank">

          <img src={viteLogo} className="logo" alt="Vite logo" style={

            { height: "5em",

              padding: "1.5em",

              willChange: "filter",

              transition: "filter 300ms"

            }

          }/>

        </a>

2. 위 방법들에 대한 고찰

위 방법들이 틀린 방법은 아니나, 컴포넌트를 생성하고, 수정하고, css를 수정하는 과정에서 지속적으로 css파일을 생성하고, 수정하는 과정이 반복되어져야합니다. 좀 더 간편하면서도 좋은 방법인 css in js 방식을 알아보고자 합니다. 

css in js = Javascript 안에 css를 작성하는 것

 

3. Styled-compnents를 도와주는 저명한 패키지 : https://styled-components.com/

styled-components

 

3-1 Terminal에서 styled-components 설치

설치 명령어 : yarn add styled-components

3-2 styled-compnents를 사용할 파일 상단에 import를 통해 styled-components 패키지 로드

import styled from "styled-components";

import styled from "styled-components"라는 코드를 사용하여 , 앞서 yarn 명령어를 통해 설치한 styled-components 패키지를 로드합니다.

3-3 Styled-Components의 사용 

function TestPage(props) {

    return (

        <Wrapper>

            <Title>{props.Title}</Title>

            <Contents>{props.Contents}</Contents>

        </Wrapper>

    );

}

const Wrapper = styled.p`

    margin : 0;

    font-family: 'Courier New', Courier, monospace;

    line-height: 1.5;

    font-size: 1rem;

`;

사용은 대강 이런식으로 진행하면 됩니다.

Wrapper 부분만 예시로 보여드리자면, 위에서 선언한 스타일 컴포넌트를 styled라는 명칭으로 가져왔기에, 

"styled." 뒤에 각 html 태그를 통해서 styled을 `` 지정하고 자바스크립트처럼 컴포넌트 스타일을 지정할 수 있습니다.