React, JS CSS-in-JS (styled-compoents) 장,단점 사용법

stlyed components

스타일 도구는 CSS-in-JS(styled components와 동일하게 js파일에 작성하는 방법), css, sass 등 다양한 방법이 있다.

CSS-in-JS ?

CSS-in-JS란 스타일 정의를 css나 scss 파일이 아닌 js로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.

기존 웹사이트는 HTML, CSS, JS를 각자 별도의 파일로 두고 작성했는데,React, Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 컴포넌트 기반 개발이 주류가 됐다. 그에 따라 한 컴포넌트( JS 파일) 안에 HTML(실제론 JSX), CSS, JS를 모두 포함하는 개발 방법이 많이 사용되고 요즘 추세이기 때문에 CSS-in-JS가 더 뜨고 있다.

어떤 것이 좋고 나쁜가?
결론부터 말하자면 아직 까지는 선택이라 볼 수 있다. CSS-in-JS가 대세라 말하는 사람들이 많겠지만? 프로젝트에 규모나 용도에 따라 달라질 수 있다고 생각한다.

• css, scss 단점

1. 전역관리
   CSS 파일은 전역적으로 관리한다. 다른 디렉토리에서 작업을 하더라도 해당 파일이 다른 디렉토리에 영향을 미칠 수 있다.
2. 유지보수
   1번과 연결되는 부분인데, 전역적 관리라는 것은 모듈화가 미흡하다는 의미이고 작업이 크고 고도화 될수록 유지 보수에 많은 시간을 소요한다.

• CSS-in-JS 장점
  • CSS를 컴포넌트로 작성하기 때문에 파일 자체에 유지 보수가 적다.
  • JS 환경을 활용할 수 있다.
  • 상수와 함수를 쉽게 공유 가능 (React에서 props로 삼항 연산자 사용 가능)
  • 클래스를 자동으로 생성하기 때문에 시간이 절약되고, 코드 경량화의 장점이 있다.

• CSS-in-JS 단점

  • JS내에 CSS를 다뤄야 하기 때문에 학습 곡선이 넓어진다.

  • 별도의 라이브러리를 설치하기 때문에 번들 크기가 커진다.

  • 인터렉션한 페이지일 경우 CSS 파일을 따로 관리하는 것보다 느린 성능을 보인다.

  • FOUC(Flash of unstyled content)
    브라우저에 보여지는게 많아 속도가 느려져, 렌더링 후 CSS가 입혀지기 전에 원형의 모습이 잠깐 노출되는 현상이 나타난다.

React에서 styled-component 사용하기

1. 설치 하기
   yarn add styled-components or npm install --save styled-components

2. import 하기
   import styled from 'styled-components';

3. 사용하기
   예시 코드

   const StyledButton = styled.button\`
   padding: 0.375rem 0.75rem;
   border-radius: 0.25rem;
   font-size: 1rem;
   line-height: 1.5;
   border: 1px solid lightgray;
   & > span{
      boredr: 1px solid #000;
   }
   
   ${(props) =>
    props.primary &&
    css\`
      color: white;
      background: navy;
      border-color: navy;
    `}
   `;

   JS 파일에 작성하기 때문에 위 같이 함수나 삼항 연산자를 사용할 수 있고 '&'가 자신을 나타내기 때문에 nesting 표현도 사용 가능하다.

CSS-in-JS