styled_components

Styled-Components

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데

class 만들어놓은걸 까먹고 중복해서 또 만들거나
갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나
CSS 파일이 너무 길어져서 수정이 어렵거나 와 같은 문제가 발생합니다.

이때 styled-components를 사용하면 컴포넌트 제작시 스타일을 바로 입힌 컴포넌트를 만듦으로써 위와같은 문제를 해결할 수 있습니다.

설치방법

yarn add styled-components
npm install styled-components

import styled from 'styled-components'

기본적인 사용법

이 라이브러리를 이용하시면 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있습니다. 예시로, padding : 20px인 div박스를 styled-components를 이용해 만들어보겠습니다.

import React, { useState } from 'react';
import styled from 'styled-components';

let 박스 = styled.div`
  padding : 20px;
`;

function Detail(){
  return (
    <div>
      <HTML 많은 곳/>
      <박스></박스>
    </div>
  )
}

div박스를 하나 만들고 싶으면 저렇게 styled.div 라는걸 사용하면 됩니다. (p태그는 styled.p)
그리고 그 오른쪽에 “ backtick 기호를 이용해서 기본 스타일을 다 넣어주면 됩니다.
이를 변수로 저장하면 컴포넌트가 완성됩니다. 원하는 곳에 사용하면 됩니다.

그럼 최종적으로 padding : 20px인 div박스를 만들 수 있습니다.

ex) font-size : 25px인 h4 태그 생성

import React, { useState } from 'react';
import styled from 'styled-components';

let 박스 = styled.div`
  padding : 20px;
`;
let 제목 = styled.h4`
  font-size : 25px;
`;

function Detail(){
  return (
    <div>
      <HTML 많은 곳/>
      <박스>
        <제목>안녕하세요</제목>
      </박스>
    </div>
  )
}

추가 문법 : props로 스타일링하기

여러가지 사용법 중 가장 유용한건 바로 props로 스타일링하는 방법입니다. 여러가지 비슷한 UI가 필요한 경우 어쩌죠? (ex 위에서 만든 제목 (h4) 요소가 여러가지 색깔 버전으로 필요할 때)

그럼 제목요소를 여러번 복사하는 것 보다는 다양한 스타일이 필요한 곳에서 props 문법을 이용해 개발해주면 됩니다.

import React, { useState } from 'react';
import styled from 'styled-components';

let 박스 = styled.div`
  padding : 20px;
`;
let 제목 = styled.h4`
  font-size : 25px;
  color : ${ props => props.색상 };
`;

function Detail(){
  return (
    <div>
      <HTML 많은 곳/>
      <박스>
        <제목>안녕하세요</제목>
      </박스>
    </div>
  )
}

▲ 제목(h4)에 color라는 스타일을 넣습니다. 그리고 색상기입란에 ${ props => props.색상 } 이라는 코드를 작성합니다. – ${} 이라는 문법은 문자를 생성하는 “ 백틱 기호안에서 쓸 수 있는 ES6 문법인데, 문자 중간중간 함수나 변수를 집어넣고 싶을 때 사용합니다. – 그리고 props.색상이라는 props 변수를 여기에 집어넣은 겁니다. 그냥 ${ props.색상 } 이렇게 넣으면 안되고 저렇게 콜백함수로 넣으셔야합니다.

import React, { useState } from 'react';
import styled from 'styled-components';

let 박스 = styled.div`
  padding : 20px;
`;
let 제목 = styled.h4`
  font-size : 25px;
  color : ${ props => props.색상 };
`;

function Detail(){
  return (
    <div>
      <HTML 많은 곳/>
      <박스>
        <제목 색상="blue">안녕하세요1</제목>
        <제목 색상={'red'}>안녕하세요2</제목>
      </박스>
    </div>
  )
}

▲ props로 자리잡은 부분에 원하는 문자를 전송해줄 수 있습니다. 위의 예제에선 props.색상이라는 props에 각각 blue라는 문자, red라는 문자가 들어가서 컴포넌트가 생성됩니다. 실행 화면을 통해 각각의 컴포넌트가 다른 색으로 뜨는것을 확인할 수 있습니다. 같은 컴포넌트인데 props 문법을 이용해 각각 다른 스타일을 넣을 수 있다는 것이죠.