이번주 업무 중에 css 를 좀더 효과적으로 사용해야하는 업무가 있어서 react에서 css 를 다루는 방법들에 대해 조사해보고 알고 있었던 내용이라도 깊게 살펴보면서 실제로 어떻게 동작하는지 내부적인 부분도 함께 살펴보았다. 그래서 잊지 않기 위해 간단한 정리를 하였다.

TailwindCSS

tailwind CSS는 utility-first CSS 프레임워크라고 정의 되어 있다. 이는 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.

사용 예시)

<div class="pb-10 sm:pb-12 md:pb-8 lg:pb-4">
    Hello world
</div>

장점

• Utility-First의 편리함과 빠른 개발

스타일 코드도 HTML 코드 안에 있기 때문에 HTML와 CSS 파일을 별도로 관리할 필요가 없다. 그 덕분에 원하는 태그의 스타일을 변경하기 위해 클래스명을 검색해가며 일일이 필요한 CSS 코드를 찾을 수고도 사라진다. 또한 반대로 꼭 미리 셋팅된 클래스만 써야해서 더 어렵다고 느낄 수도 있는데, Intelli Sense 플러그인을 제공하여 미리보기, 자동완성, 신택스 하이라이팅, 린팅을 지원하기 때문에 조금만 익숙해지면 금방 문서 없이 개발할 수 있다.

• 클래스명을 고민하지 않아도 된다.

개발을 하다보면 css 적용을 위해 클래스명을 고민하게 되는데 미리 세팅된 유틸리티 클래스를 활용하기 때문에 클래스 명을 고민하지 않아도 된다.

• 작고 가벼운 사이즈

일단 모듈 사이즈도 다른 css frameworks 보다 작은 사이즈 이고, 또한 프로덕션을 위해 빌드 할 때 항상 Tailwind의 purge옵션과 을 사용하여 사용 하지 않는 스타일을 설정해서 최종 빌드 크기를 최적화가 가능하다.

purge 속성은 css 최적화와 관련된 속성으로써, 현재 프로젝트 내에서 사용하고 있는 tailwind css 속성만 해석해서 build할 수 있도록 해주는 일종의 최적화 모듈 번들러와 비슷한 역할을 한다

또한 좀 더 최적화 시키고 싶으면 cssnano와 같은 툴을 함께 이용하면 좋다. cssnano 툴은 만들어진 css 파일을 한 번 더 압축하는 역할을 한다.

단점

• 코드 가독성 떨어짐

다양한 css 속성을 넣다보면 코드의 길이가 길어져서 가독성이 떨어진다.

Sass 방식

Sass 방식은 Syntactically Awesome Style Sheets의 줄일말로 css를 더 간단하고 효율적으로 만든다. 또한 Sass는 전처리기 라고도 하는데, CSS가 만들어지기 전에 다양한 일들을 한다.

Sass를 사용하면 변수, 수학 연산, 믹스인, 루프, 함수, 가져오기 및 CSS 작성을 훨씬 더 강력하게 만드는 도구를 사용할 수 있다.

사용 예시)
변수

중첩

믹스인

장점

• 높은 생산성을 가져온다.
  

Styled-Component

기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부른다. css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있다.

사용 예시)

const Button = styled.button`
    font-size: 1rem;
    margin: 1rem;
    padding: 1rem 1rem;
    @media (min-width: 768px) {
        padding: 2rem 2rem;
    }
    border-radius: 0.25rem;
    border: 2px solid blue;
    background-color: blue;
    color: white;
`;

const TestComponent = () => (
    <>
        <Button>
            Hello world!
        </Button>
    </>
);

장점

• 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다.

• Sass 와 관련된 모든 기능을 사용할 수 있어 생산성 측면이 뛰어나다.

• 모듈성으로 관리 되기 때문에 유지 보수에 용의하다.

단점

• 별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다.

• 인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다. 그렇게 되면 FOCU(Flash of unstyled content) 현상이 일어날 수 있는데, FOCU 현상은 브라우저에 보여줄 것들이 많아짐에 따라, 점차적으로 속도가 느려집니다. 특히, 컴포넌트가 렌더링되며 형태가 잡히기 때문에 원형의 모습이 잠깐 노출되는 현상이다.

해결법 : 이를 개선하기 위해 CSS-in-JS에서도 css를 SSR 방식으로 넣어주는 등 다양한 노력을 이어가고 있다.