각 프로젝트에 맞게 권장되는 CSS 적용 방식이 있겠지만
컴포넌트 스타일링 방식이 리액트에 가장 어울리는 CSS라고 생각합니다.
모든 요소마다 전체 CSS를 붙이는게 아니라 CSS도 필요한 컴포넌트에서 불려지는 것이 프로젝트를 최적화하는데 필요하다 생각하여 이번 글에서는 리액트에서 많이 사용하는 CSS를 작성해보려고 합니다. 개인적인 생각으론 CSS-in-JS 방식을 제일 선호합니다.
CSS module
CSS module은 Dom에서 로드할때 고유한 클래스 이름이 부여되는 방식입니다.
이를 활용하여 각 컴포넌트에 해당하는 파일명에 .module.css 를 붙여서 CSS를 모듈화 할 수 있습니다.
ex) app.js 파일 app.module.css각 컴포넌트에만 해당되는 css라서 네이밍을 설정하는데 자유롭습니다. 네이밍은 Dom을 로드할때 변경되기 때문에 일반적인 네이밍을 사용하기 편합니다.
// app.module.css
.title {
font-size: 4em;
}
// app.js
import styles from './App.module.css';
...
<div className={styles.title}>Title</div>// dom에서 변경된 네이밍
.app_title__ANyie{
font-size: 4em;
}장점
- 별도의 설치가 필요 없습니다.
- 그리고 CSS 네이밍을 컴포넌트 단위로 생각하면 되서 단순합니다.
단점
- 각각의 css.module이 css 파일로 존재하다보니 파일들이 많이 생기기 때문에 이를 프로젝트로 구성할 때 정리가 필요합니다.
CSS in JS
먼저 CSS in JS의 개념을 짚고 넘어가겠습니다. CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다.
React나 Vue, Angular와 같은 라이브러리에서 각각의 컴포넌트에 CSS가 따라오는 이상적인 CSS입니다. 각각의 컴포넌트 단위로 개발된 블록을 조립하는 방식은 다른 프로젝트에서도 재사용이 편리합니다.
import styled from "styled-components";
const Container = styled.div`
display: flex;
`
const Content = styled.div`
padding: 16px;
`
return (
<Container>
<Content>
내용
</Content>
</Container>
)
styled-components도 마찬가지로 DOM에서 변수명이 해시 처리된 클래스 이름으로 바뀌어 보입니다.
js를 CSS에 적용하여 동적인 스타일링이 가능합니다.
이처럼 변경하고자 하는 값을 props로 전달하면 styled-compoennts에서 손쉽게 style에 적용하여 동적인 스타일링을 연출할 수 있습니다.
- CSS가 한 파일 안에 위치해 있기 때문에 코드의 스타일을 추적하기가 편리합니다.
- js를 적용하여 동적인 스타일링이 편리합니다.
- 컴포넌트를 재사용하기 편리합니다.
추천하는 방법
개인적인 활용 방법으로는 CSS-in-JS 방식을 가장 추천합니다.
이를 잘 활용하면 CSS 스타일링의 문서 구조를 요소별로 Atomic Design 형태로 만들어 나갈 수 있습니다.
이러한 Atomic design 방식을 사용하면 데이터가 최적화 될 뿐아니라 각 블럭을 재사용하기 편합니다.
끝으로 리액트 프로젝트에서는 스타일링을 본문과 완전히 분리하여 관리할지 또는 모듈화를 어떻게 시킬지가 스타일링의 방법을 결정하는 데 포인트가 됩니다. 이를 리액트의 속성에 맞게 스타일링하는 방법은 리액트를 컴포넌트 방식으로 최적화 할 수 있는 스타일링의 중요한 방법입니다.
또한 지난 프로젝트에서 언급한 Material UI를 활용한 Design System 구축하기가 있습니다. 이러한 사례도 한 번 참고해 보세요.
