React, styled-components

styled-components

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

• class 만들어놓은걸 까먹고 중복해서 만듬
• 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용됨
• CSS 파일이 너무 길어져서 수정이 어려움

등등의 경우가 있음

 

그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는데

styled-components 라는 라이브러리를 설치하여 이용하면 됨

 

설치

터미널을 열어서

npm install styled-components

을 입력하여 styled-components 설치

 

styled-components 사용법

이 라이브러리를 이용하면 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있음

 

import styled from 'styled-components'

사용하고 싶은 컴포넌트 맨위에  import하여 사용

 

import styled from 'styled-components';

let YellowBtn = styled.button`
  color : yellow;
  padding : 10px;
`;

function Box(){
  return (
    <div>
        <YellowBtn>버튼</YellowBtn>
    </div>
  )
}

1. 태그를 만들고 싶으면 styled.태그명으로 사용하면 됨
   • div태그면 styled.div
   • p태그면 styled.p
2. 오른쪽에 `` backtick 기호를 이용해서 CSS 스타일을 넣을 수 있음
3. 그럼 그 자리에 컴포넌트를 남겨주는데 변수에 저장해서 쓰면 됨

 

let YellowBtn = styled.button`
  color : yellow;
  padding : 10px;
`;

let NewBtn = styled.button(YellowBtn)`
  color : blue;
`;

기존 스타일 복사 가능

복사해 만든 스타일 커스터마이징 가능

 

styled-component props로 재활용

여러가지 비슷한 UI가 필요한 경우 props를 이용하여 기존 컴포넌트를 살짝식 다르게 이용할 수 있음

import styled from 'styled-components';

let YellowBtn = styled.button`
  background : ${ props => props.bg };
  color : yellow;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
        <YellowBtn bg="orange">오렌지 버튼</YellowBtn>
        <YellowBtn bg="blue">파랑 버튼</YellowBtn>
    </div>
  )
}

${ props => props.변수명 }을 사용해서 컴포넌트에 변수를 props로 입력가능 해짐

 

- ${ } 문법

• ${} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능함
• 백틱으로 만든 문자 중간에 변수같은걸 넣고 싶을 때 ${ 변수명 }으로 쓸수 있음

JS에서 문자열을 감싸는 따옴표로 '작은따옴표', "큰따옴표", `역따옴표`를 사용할 수 있음

 

let A = 1
let B = 2
console.log(A + " 더하기 " + B + "는 " + (A+B));;

 

문자열을 "이나 '를 이용하여 내부에 표현식을 추가하려면

문자열을 따옴표로 분리하고 + 연산자로 하나씩 연결해야 하는 불편함이 있음

이것을 표현식 삽입법이라고 함

 

let A = 1
let B = 2
console.log(`${A} 더하기 ${B} 는 ${A + B}`);

 

하지만 백틱( `, 역따옴표)를 사용하여 위에 예시처럼

문자열을 분리할 필요없이 간편하면서 가독성있게 문자열 내부에 표현식을 추가할 수 있음

이것을 템플릿 리터럴(template literal)이라고 함

 

styled-components 장점

• CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일을 넣을 수 있음
• 한 파일에 적은 스타일이 다른 JS 파일로 오염되지 않음(CSS파일은 오염됨).
• 페이지 로딩시간 단축됨(적은 스타일은 html 페이지의 <style>태그에 넣어주기 때문)

 

styled-components 단점

• JS 파일이 매우 복잡해짐
  • 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분이 어려워짐
• JS 파일 간 중복 디자인이 많이 필요한 경우
  • 다른 파일에서 스타일 넣은 것들 import 해와서 쓰면 되지만 CSS파일과의 차이가 없어짐
• CSS 담당하는 디자이너가 있다면 협업시 불편
  • 디자이너가 styled-components 문법을 모른다면 디자이너가 CSS로 짠 걸 styled-components 문법으로 다시 바꾸는 작업 필요

 

CSS파일 오염방지 기능

JS파일에 맞게 각각 CSS파일을 만들어 import해서 써도 적은 클래스명은 다른 파일에서까지 사용 가능함(오염됨)

프로젝트 사이즈가 작을 땐 편리하지만 사이즈가 커지면 관리하기 힘들어짐

 

오염을 피하기 위해 styled-components 써도 되고

CSS파일에서도 다른 JS 파일에 간섭하지 않는 '모듈화' 기능을 사용해도 됨

 

컴포넌트명.module.css 으로 CSS 파일을 작명하면 됨

컴포넌트명.js 파일에서 import 해서 쓰면 '모듈화'한 CSS파일의 스타일들은 컴포넌트명.js 파일에만 적용됨