HTML, CSS, JS를 공부하다가 React로 처음 넘어오시는 분들 중 리액트 프로젝트에서 권장되는 CSS 적용방식이 무엇인지 궁금해 하시는 경우가 많습니다. 정답은 없지만, 프로젝트 특성에 따라 더 적합한 도구가 있을 것입니다. 선택에 참고가 되도록 이 포스트에서는 컴포넌트 스타일링에 많이 쓰이는 기술들은 어떤게 있는지 소개하고자 합니다. 각 기술의 구체적인 사용법은 다른 곳에 자료가 이미 충분하다고 생각되어 이곳에서 상세하게 다루지 않습니다.
CSS module로 작성한 스타일은 실제 DOM에 로드할때 .{컴포넌트 이름}_{클래스 이름}__{해시}
형식으로 고유한 클래스 이름이 부여됩니다. 이 특성을 이용하면 각 컴포넌트에 해당하는 .module.css
파일을 만들어 기술 이름 그대로 CSS를 모듈화 할 수 있습니다. 그리고 이름 중복에 대한 걱정 없이 .button
, .title
처럼 좀 더 일반적인 클래스 이름을 지을 수 있습니다.
// Posts.module.css .header { background-color: red; } // Posts.js import styles from './Posts.module.css'; ... <div className={styles.header}>HEADER</div>
CSS-in-JS는 Javascript 파일 내에서 CSS 작성할 수 있도록 해주는 기술입니다. 대표적인 라이브러리로 styled-components가 있습니다. ``안에 CSS 문법 그대로 작성하고 변수를 생성해주면 DOM에서는 이 변수명이 해시 처리된 클래스 이름으로 나타납니다.
import styled from "styled-components"; const Layout = styled.div` display: grid; `; return ( <Layout> <button>BUTTON</button> </Layout> );
tailwind CSS는 기능적 CSS 방법론에 입각하여 사전에 정의된 스타일을 제공하는 프레임워크입니다. 이 원칙에 따라 작성된 CSS는 클래스 하나당 한가지 스타일링 기능만을 담당하며 클래스 이름은 그 기능을 반영합니다. tailwind는 이러한 규칙을 기반으로 이미 작성된 CSS를 margin, font-size, background-color부터 box-shadow까지 폭넓은 범위로 제공합니다.
(원문 링크)
마지막으로 Sass와 같은 CSS 전처리기는 리액트로 넘어오기 전에 HTML, CSS, JS로 웹사이트를 만들어보신 분들도 익숙하실 기술입니다. 자체 문법으로 CSS를 동적으로 적용하고 재사용할 수 있도록 하여 기존 CSS의 한계를 보완해줍니다. 하지만 리액트에서는 컴포넌트 재사용이나 컴포넌트 내의 JS로 커버할 수 있는 부분도 많기 때문에 상대적으로 사용하는 이점이 떨어집니다.
프로젝트 사이즈가 커질수록 CSS 구조를 어떻게 잡는지가 매우 중요해집니다. 위에서 소개한 4가지 기술은 상호배타적이지 않기 때문에 필요에 따라 1-2개를 적절히 선택하여 사용할 수 있습니다. 리액트 프로젝트에서는 특히 스타일링을 본문과 완전히 분리하여 관리할지 여부와 모듈화 정도가 스타일링 방법을 결정하는 포인트가 될 것 같습니다.
카우치코딩 6주 포트폴리오 멘토링에서는 가독성/유지보수, 러닝커브, 재사용성, 퍼포먼스 등 기준을 고려하여 styled-components를 메인 스타일링 도구로 사용하고 있습니다. (본인이 시도하고 싶은 기술이 따로 있을 경우 직접 사용해보는 것을 장려합니다.)
couchcoding
2022-12-07
Firebase로 Google 로그인 구현하기 (React 파트)
이전 포스팅에서는 Java Spring을 통해서 Resource Server 부분을 구현해보았는데요. 이번에는 React를 이용하여 Firebase OAuth Client 부분을 구현해 보도록 하겠습니다. ...
프론트엔드
couchcoding
2022-12-07
[React - 1] 리액트의 특징
가장 많이 사용하는 프론트엔드 프레임워크는 당연 리액트입니다. 프론트엔드 개발영역이 크지 않던 시절엔 프론트엔드 구인 광고에는 약 70% 이상이 리액트 개발자를 원하고 있습니다. 리액트는 어떤 이유로 가장 인기있는 프레임워크가 되었을까요? 이번 포스팅에서는 리액트의 ...
프론트엔드
couchcoding
2022-12-07
[React-2] 설치하기 & package.json
이전 포스팅에서는 React가 어떤 특징을 가지는 프레임워크인지 알아보았습니다. 이번 포스팅에서는 React를 실제로 다루기 위해서 개발환경을 구성하도록 해보겠습니다. ...
프론트엔드
couchcoding
카우치코딩 공식 계정입니다.