리액트로 component를 구현하게 되면 각각의 컴포넌트에 대한 스타일을 적용해야 한다.
일반적으로 컴포넌트 내부의 태그에 inline으로 스타일을 적용할 수 있지만, 본 글에서는 className으로 스타일을 적용하는 방식과 가장 많이 사용하는 css-modules, styled-components(CSS in js) 방식에 대해 살펴보려고 한다.
1️⃣ className으로 스타일 적용
className으로 스타일을 적용하는 방식은 일반적인 html element에 스타일을 적용하는 방식과 거의 동일하다.
따로 css 파일을 생성한 뒤에 className 방식으로 스타일을 적용하면 되는데, 이때 주의할 점은 html에서 사용한 class가 아닌 className을 사용한다는 것이다.
const Component1 = () => {
return (
<>
<div className="mt mb">...</div>
</>
)
}위의 코드는 Component1이라는 컴포넌트의 dom에 className을 간단하게 추가한 것인데 <div> 태그에 className으로 mt와 mb를 각각 추가한 것을 볼 수 있다.
이처럼, 리액트에서의 className도 html에서 사용한 방식과 동일하게 하나의 class만 줄 수도 있고 위의 코드처럼 여러 개의 class를 부여할 수도 있다.
className 속성을 추가하는 방식으로 일반 html과 동일하게 스타일 적용이 가능하지만 아주 큰 단점이 존재하는데, 이렇게 작성한 각각의 컴포넌트에 대한 css 파일의 코드들이 모두 전역 스코프를 가진다는 것이다.
이 말은 즉, className에 대한 중복 에러가 발생할 수 있다는 것이다.
분명 다른 컴포넌트에서 작성한 className이지만, css 파일의 코드들이 모두 전역 스코프를 가지기 때문에 className이 충돌되는 에러가 발생하게 된다.
따라서 단순히 className을 통해 스타일을 적용하려고 하면 각각의 className이 중복되지 않도록 class 이름을 신중하게 작성해야 한다는 번거로움이 생기게 된다.
2️⃣ CSS Modules
그렇다면 className으로 컴포넌트에 대한 스타일을 적용하려고 하면 각각의 class 이름이 중복되지 않도록 개발자 입장에서 일일이 신경 쓰고 관리를 해야 할까?
CSS Modules를 사용하면 위의 문제를 해결할 수 있다.
CSS Modules은 css 파일을 하나의 모듈처럼 만들어줌으로써 일반 css의 사용에서 className이 중복되어서 충돌하는 문제를 해결해 준다.
⬇️ CSS Modules를 사용하기 위해서는 몇 가지 주의할 점이 있다.
- css 파일명 형식 =
name(변경 가능).module.css - css 파일을 import 하는 방식 =
import styles from './name.module.css'
일반적으로 css 파일을 생성할 때 파일명.css형식으로 설정을 했다면 CSS Modules를 사용하기 위해서는 파일명.module.css로 지정을 해줘야 한다.
이렇게 파일명을 지정해 줘야지만 해당 css 파일이 module 형식이라는 것을 인식하게 된다.
더불어, css 파일을 import 하는 방식에도 조금 차이점이 있는데 일반적으로 import './name1-stylesheet.css' 형식을 사용했다면 CSS Moudles에서는 import styles from './name2.module.css'형식으로 import를 해줘야 한다.
이는 해당 css 파일의 모든 코드를 styles라는 객체 하나로 묶어서 가져온다는 의미다.
이렇게 import를 해오면 컴포넌트 내부의 태그들은 해당 styles 객체의 className key로 접근해서 className을 가져오게 된다.
return <button className={styles.color}>...</button>;위의 코드처럼 그냥 color이라는 className을 가져오는 것이 아니라, styles 객체 안의 color를 가져오게 되는 것이고 이를 className으로 추가해 주는 방식이다.
📍 이처럼 CSS Modules를 사용하게 되면 className의 중복 에러를 방지할 수 있다는 장점이 있다.
✅ 참고하면 좋을 사이트
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
3️⃣ styled-components
앞서 살펴본 2가지 방식은 모두 외부 css 파일에 컴포넌트의 스타일을 적용하는 방식이었다.
하지만, 서비스를 만들다 보면 컴포넌트 위주로 프로젝트가 진행되거나 혹은 규모가 굉장히 커져서 코드의 양이 상당히 많아지는 경우가 분명 있을 것이다.
이때, 외부 css 파일을 통해 스타일을 적용하다 보면 코드 하나하나를 관리하고 이를 유지 및 보수하는데 어려운 점이 많을 것이다.
따라서, 규모가 큰 프로젝트나 컴포넌트 위주의 프로젝트에서는 컴포넌트가 구현되는 코드 내부에서 함께 스타일을 적용하는 것이 훨씬 편할 수도 있다.
이처럼 외부 css 파일이 아닌 컴포넌트 구현 코드가 있는 js 파일 내부(혹은 외부 js 파일)에서 함께 스타일을 적용하는 방식을 CSS in js 방식이라고 하고, CSS in js의 경우 별도의 라이브러리를 제공하기 때문에 각자에게 맞는 라이브러리를 설치하고 사용해야 한다.
굉장히 많은 라이브러리가 있지만 본 글에서는 가장 많이 사용되고 있는 styled-components 위주로 살펴볼 예정이다.
styled-components는 별도의 설치가 필요하기 때문에 npm install styled-components이나 yarn add styled-components 명령어를 입력해서 각자의 프로젝트에 해당 라이브러리를 설치해야 한다.
설치 후 별도의 css 파일을 생성할 필요 없이 컴포넌트를 구현하고 있는 js 파일 혹은 별도의 js 파일을 생성한 후에 스타일 코드를 작성하면 된다.
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: #BF4F74;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// Use Title and Wrapper like any other React component – except they're styled!
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);위 코드는 styled-components 사이트에서 제공하는 예시 코드인데, 앞서 언급한 것과 같이 js 파일 내부에서 스타일을 적용한 것을 볼 수 있다.
Title이라는 변수를 생성한 뒤에 styled.h1으로 h1 태그를 만들고 `` 사이에 h1 태그에 대한 스타일 코드를 작성했다.
✅ 더 자세한 내용은 아래 사이트 참고!
https://styled-components.com/docs/basics#motivation
이처럼 styled-components를 사용하게 되면 컴포넌트에 해당하는 스타일을 컴포넌트별로 관리할 수 있기 때문에 코드들을 관리하는 데 있어 편리하다는 장점이 있다.
