이 글에서는 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
가 추가되어 있으면 된다.
만약 본인이 리액트를 JavaScript가 아닌 TypeScript로 사용한다면 하나를 더 설치해야 한다.
# If you use TypeScript
npm install @types/styled-components -D
이 명령어는 styled-components
를 TypeScript에서 사용할 수 있도록 하는 패키지를 설치하는 것이다. package.json
파일 내 devDependencies
목록에 보면 @types/styled-components
가 추가되어 있는 것을 확인할 수 있다.
styled-reset 설치
styled-components
와 함께 많이 사용하는 styled-reset
패키지도 있다. styled-reset
패키지는 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 패키지이다. 기본적으로 제공되는 스타일이 지워진다는 것은 예를들어 <h1>
태그가 가지고 있는 폰트 크기나 굵기와 같은 스타일이 모두 지워진다는 의미이다. 브라우저마다 서로 다른 스타일을 모두 초기화해줌으로써 모든 브라우저에서 호환성을 맞출 수 있다.
styled-reset
을 적용하면 위 이미지와 같이 <h1>
태그에 적용되어 있는 기본 스타일이 전부 제거된다.
아래 명령어를 이용하여 styled-reset
을 설치할 수 있다.
npm install styled-reset
이후 package.json
파일에 dependencies
를 보면 styled-reset
이 추가되어 있는 것을 확인할 수 있다.
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;
여기에 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;
기존 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-components
로 작성한 폰트 사이즈, 색상 등은 적용되어 있지만 작성하지 않은 굵기와 같은 스타일은 사라진 것을 볼 수 있다.
'Development > React' 카테고리의 다른 글
리액트 | 상대 경로를 절대 경로로 대체하기 (with. Vite & React ts) (0) | 2024.02.09 |
---|---|
리액트 | React Router를 이용한 페이지 이동 처리 (with. react-router-dom) (0) | 2024.02.04 |
리액트 | Vite를 이용한 React 프로젝트 생성 (설치부터 프로젝트 생성까지) (0) | 2024.01.25 |
리액트 | 리액트 프로젝트 GitHub page로 배포하기 (0) | 2024.01.17 |
리액트 | useState Hook 간단하게 이해하기 (0) | 2024.01.15 |