리액트 | styled-components를 이용한 React 스타일링 (with. styled-reset)

이 글에서는 CSS가 아닌 styled-components 라이브러리를 이용해 리액트 어플리케이션의 스타일링 방법에 대해 알아본다.

---

styled-components란 무엇인가

styled-components는 리액트의 디자인을 보다 쉽게 하기 위해 개발된 패키지로, 별도의 CSS 파일을 이용하여 스타일을 적용하는 것이 아니라 컴포넌트 내에서 스타일을 지정할 수 있도록 도와주는 패키지이다.

리액트와 같은 프레임워크는 재활용 가능한 컴포넌트 단위로 분할하여 개발이 이루어지고 있는데, 리액트에서는 이미 HTML은 JSX를 이용하여 포함하고 있으며, styled-components 패키지를 이용하면 CSS 역시 별도의 CSS 파일이 아닌 JavaScript(JSX) 혹은 TypeScript(TSX) 내에 포함하여 컴포넌트 단위로 스타일을 작성하고 관리할 수 있다.

---

styled-components 설치

styled-components를 리액트 프로젝트에서 사용하고 싶다면 먼저 설치를 진행해야 한다. 설치는 아래 명령어를 통해 설치할 수 있다.

# install lastest version
npm install styled-components

# install specific version
npm install styled-components@version
# example
npm install styled-components@6.1.8

이후 package.json 파일 내 dependencies 목록에 styled-components가 추가되어 있으면 된다.

package.json

만약 본인이 리액트를 JavaScript가 아닌 TypeScript로 사용한다면 하나를 더 설치해야 한다.

# If you use TypeScript
npm install @types/styled-components -D

이 명령어는 styled-components를 TypeScript에서 사용할 수 있도록 하는 패키지를 설치하는 것이다. package.json 파일 내 devDependencies 목록에 보면 @types/styled-components가 추가되어 있는 것을 확인할 수 있다.

package.json

---

styled-reset 설치

styled-components와 함께 많이 사용하는 styled-reset 패키지도 있다. styled-reset 패키지는 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 패키지이다. 기본적으로 제공되는 스타일이 지워진다는 것은 예를들어 <h1> 태그가 가지고 있는 폰트 크기나 굵기와 같은 스타일이 모두 지워진다는 의미이다. 브라우저마다 서로 다른 스타일을 모두 초기화해줌으로써 모든 브라우저에서 호환성을 맞출 수 있다.

styled-reset 적용 전

styled-reset 적용 후

styled-reset을 적용하면 위 이미지와 같이 <h1> 태그에 적용되어 있는 기본 스타일이 전부 제거된다.

아래 명령어를 이용하여 styled-reset을 설치할 수 있다.

npm install styled-reset

이후 package.json 파일에 dependencies를 보면 styled-reset이 추가되어 있는 것을 확인할 수 있다.

package.json

---

styled-components 적용

먼저 styled-components를 적용하는 방법에 대해 알아보자. styled-components는 컴포넌트를 만들 때 함수를 이용하여 만드는 것과 같이, 적용할 디자인을 하나의 컴포넌트로 만들어서 사용하게 된다.

만약 <Home />이라는 컴포넌트를 만들고 안에 내용을 채운다면 아래와 같이 구성할 수 있을 것이다.

// home.tsx
function Home() {
  return (
    <>
      <div>
        <h1>제목</h1>
      </div>
      <div>
        <h3>소제목</h3>
      </div>
      <div>
      	<p>내용...</p>
      </div>
    </>
  );
}

export default Home;

home.tsx

여기에 styled-components를 적용한다면 다음과 같이 만들 수 있다.

import styled from "styled-components";

const Wrapper = styled.div`
  height: 10vh;
  display: flex;
  justify-content: center;
`;

const Title1 = styled.h1`
  font-size: 54px;
  color: blue;
`;

const Title3 = styled.h3`
  font-size: 38px;
  color: red;
`;

const Text = styled.p`
  font-size: 24px;
`;

function Home() {
  return (
    <>
      <Wrapper>
        <Title1>제목</Title1>
      </Wrapper>
      <Wrapper>
        <Title3>소제목</Title3>
      </Wrapper>
      <Wrapper>
        <Text>내용</Text>
      </Wrapper>
    </>
  );
}

export default Home;

styled-components를 적용한 home.tsx

기존 HTML 태그 대신에 각 태그에 해당하는 컴포넌트를 만들어서 태그 대신 사용하는 것이다. 태그 대신 생성한 컴포넌트의 내용에는 스타일과 관련된 내용들이 들어간다. 기본적으로 styled-components를 만드는 방법은 다음과 같다.

// example
const {components_name} = styled.{html_tag_name}`
	{CSS Style}
`;

하나의 파일 내에서 생성한 styled-components는 해당 파일 내에서만 사용가능하다. 따라서 같은 이름의  styled-components라도 각 컴포넌트 내에서 어떠한 스타일을 적용했느냐에 따라 스타일이 달라질 수 있다.

---

styled-reset 적용

styled-reset은 하나의 컴포넌트 혹은 라우터 전체에 적용이 가능하다. 만약 하나의 컴포넌트에 적용하고 싶으면 적용하고 싶은 컴포넌트에 styled-reset을 적용하면 되고, 라우터 전체에 적용하고 싶으면 라우터가 구성되어 있는 tsx 파일 내에서 적용하면 된다.

이 글에서는 라우터 전체에 적용하는 방법을 예시로 작성할 것이다. 위에서 확인하였듯, styled-reset을 적용하면 HTML 태그에 적용되어 있는 기본 스타일이 모두 사라지게 된다.

아래 코드로 styled-components를 하나 생성한다.

const GlobalSytles = createGlobalStyle`
    ${reset};
`;

그리고 라우터 최상단 혹은 컴포넌트 최상단에 <GlobalStyles /> 컴포넌트를 불러오면 된다.

function App() {
  return (
    <>
      <GlobalSytles />
      <RouterProvider router={router} />
    </>
  );
}

전체 코드를 살펴보면 다음과 같다.

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { createGlobalStyle } from "styled-components";

import reset from "styled-reset";

import Home from "./routes/home";

const GlobalSytles = createGlobalStyle`
    ${reset};
`;

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
]);

function App() {
  return (
    <>
      <GlobalSytles />
      <RouterProvider router={router} />
    </>
  );
}

export default App;

(라우터에 대해서는 다음에 정리하도록 한다.)

styled-reset을 적용하면 HTML 태그에 적용되어 있는 스타일이 모두 사라지는 것을 확인할 수 있다.

styled-reset 적용 전

styled-reset 적용 후

필자가 styled-components로 작성한 폰트 사이즈, 색상 등은 적용되어 있지만 작성하지 않은 굵기와 같은 스타일은 사라진 것을 볼 수 있다.

---