React에서 styled-components 사용하기

2023-03-18 hit count image

React(리액트)에서 styled-components를 사용하기 위한 방법에 대해서 알아봅시다.

개요

회사에서 React(리액트)로 새로운 프로젝트를 진행하게 되었습니다. 그래서 오랜만에 처음부터 세팅할 기회가 생겨 정리하게 되었습니다. 이번 블로그 포스트에서는 React(리액트)에서 styled-components를 사용하기 위한 방법에 대해서 살펴보고, React(리액트) 프로젝트에서 styled-components를 사용해 보겠습니다.

이 블로그에서 다루는 소스코드는 깃헙(Github)에서 확인할 수 있습니다.

이번 블로그 포스트에서 사용할 소스 코드는 이전 블로그에서 만든 프로젝트를 기반으로 합니다.

프로젝트 준비

이 블로그 포스트에서 사용할 React(리액트) 프로젝트는 Webpack(웹팩)과 Typescript(타입스크립트)가 적용된 프로젝트를 기반으로 합니다. 자세한 내용은 이전 블로그 포스트를 확인해 주시기 바랍니다.

이전 블로그를 통해 프로젝트를 생성하면 아래와 같은 구조를 가지고 있습니다. 우리는 react_typescript라는 이름 대신 react_styled-components라는 이름으로 프로젝트를 생성했습니다.

|-- src
|   |-- index.html
|   |-- index.tsx
|-- .babelrc
|-- package.json
|-- webpack.config.js

설치

아래에 명령어로 React(리액트)에 styled-components를 사용하기 위해 필요한 라이브러리들을 설치합니다.

npm install --save-dev styled-components @types/styled-components babel-plugin-styled-components cross-env
  • styled-components: styled-components를 사용합니다.
  • @types/styled-components: styled-components를 사용할때 Typescript(타입스크립트)를 사용하기 위한 라이브러리.
  • babel-plugin-styled-components: styled-components의 class명을 쉽게 알 수 있게 해주는 라이브러리.
  • cross-env: Mac과 Windows에서 동일한 명령어로 환경 변수를 설정하기 위해 사용합니다.

package.json 수정

아래와 같이 package.json의 스크립트 부분을 수정합니다.

"scripts": {
  "start": "cross-env NODE_ENV=development webpack-dev-server --open",
  "prebuild": "rimraf dist",
  "build": "cross-env NODE_ENV=production webpack --progress"
},

이전에는 Webpack(웹팩)의 모드를 설정하기 위해 --mode development와 --mode production을 사용하였지만 이 부분을 환경 변수로 설정하기 위해 변경하였습니다.

Webpack 수정

아래와 같이 webpack.config.js 파일을 수정합니다.

...
module.exports = {
  mode: process.env.NODE_ENV,
  ...
};
...

이전에는 명령어로 모드를 설정하였지만, 환경 변수를 통해 설정하기 위해 mode를 별도로 추가하였습니다.

babel 설정

아래와 같이 .babelrc 파일을 수정합니다.

{
  "presets": [
    ...
  ],
  "env": {
    "development": {
      "plugins": ["babel-plugin-styled-components"]
    }
  }
}

환경 변수가 development일 경우 class명을 구별하기 쉽도록 babel-plugin-styled-components를 설정하였습니다. 환경 변수가 production인 경우 class명을 hash화해서 사람이 인식하기 어렵게 만듭니다.

[환경 변수가 development인 경우]

React에서 styled-components 사용하기 - 환경 변수 development일 때 class명

[환경 변수가 production인 경우]

React에서 styled-components 사용하기 - 환경 변수 production일 때 class명

styled-components 스타일 코딩

React(리액트)에서 styled-components를 사용하기 위해 ./src/index.tsx를 아래와 같이 수정합니다.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Styled from 'styled-components';

const Title = Styled.h1`
  color: red;
`;
interface Props {}

const App = ({  }: Props) => {
  return <Title>Hello World!</Title>;
};

ReactDOM.render(<App />, document.getElementById('app'));

확인

아래에 명령어로 우리가 생성하고 설정한 내용이 제대로 동작하는지 확인합니다.

npm start

그리고 브라우저를 열고 http://localhost:8080/ 이동하면 Hello World!가 보이는 것을 확인할 수 있습니다. package.json의 스크립트인 "start": "webpack-dev-server --mode development",을 "styled-components": "webpack-dev-server --mode development --open",처럼 --open 옵션을 추가하면 npm start로 Webpack(웹팩)의 개발 서버를 실행시키면 자동적으로 브라우저가 열리고 http://localhost:8080/로 이동합니다.

이제 실행되고 있는 개발 서버를 죽이고, 아래에 명령어로 빌드해봅니다.

npm run build

문제없이 실행되면 ./dist/ 폴더가 생성되고 하위에 index.html과 /js/app.js가 생성된 것을 확인할 수 있습니다. 또한 index.html을 열어보면 우리가 만든 index.html과 다르게 <script type="text/javascript" src="/js/app.js"></script>이 추가된 것을 확인할 수 있습니다.

에러 대응

React(리액트) 프로젝트를 확인하기 위해 npm start를 사용할 때는 문제가 없었으나, npm run build를 통해 빌드를 할 경우 아래와 같은 에러가 발생하였습니다.

ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/globals.d.ts
ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/globals.d.ts(36,15):
TS2300: Duplicate identifier 'FormData'.

ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/globals.d.ts
ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/globals.d.ts(81,5):
TS2717: Subsequent property declarations must have the same type.  Property 'body' must be of type 'BodyInit', but here has type 'string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData'.

ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/globals.d.ts
ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/globals.d.ts(107,14):
TS2300: Duplicate identifier 'RequestInfo'.

ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/globals.d.ts
ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/globals.d.ts(126,13):
TS2403: Subsequent variable declarations must have the same type.  Variable 'Response' must be of type '{ new (body?: BodyInit, init?: ResponseInit): Response; prototype: Response; error(): Response; redirect(url: string, status?: number): Response; }', but here has type '{ new (body?: string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData, init?: ResponseInit): Response; prototype: Response; error: () => Response; redirect: (url: string, status?: number) => Res...'.

ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/globals.d.ts
ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/globals.d.ts(249,14):
TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.

ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/index.d.ts
ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/index.d.ts(9418,18):
TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.

ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/index.d.ts
ERROR in /git_repository/react_styled-components/node_modules/@types/react-native/index.d.ts(9421,11):
TS2451: Cannot redeclare block-scoped variable 'navigator'.

ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.d.ts
ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.d.ts(5353,11):
TS2300: Duplicate identifier 'FormData'.

ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.d.ts
ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.d.ts(5363,13):
TS2300: Duplicate identifier 'FormData'.

ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.d.ts
ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.d.ts(17123,11):
TS2320: Interface 'Window' cannot simultaneously extend types 'GlobalFetch' and 'WindowOrWorkerGlobalScope'.
  Named property 'fetch' of types 'GlobalFetch' and 'WindowOrWorkerGlobalScope' are not identical.

ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.d.ts
ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.d.ts(18152,13):
TS2451: Cannot redeclare block-scoped variable 'navigator'.

ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.d.ts
ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.d.ts(18568,6):
TS2300: Duplicate identifier 'RequestInfo'.

ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.d.ts
ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.d.ts(18746,6):
TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.

ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.iterable.d.ts
ERROR in /git_repository/react_styled-components/node_modules/typescript/lib/lib.dom.iterable.d.ts(67,11):

이 문제를 해결하기 위해 tsconfig.json을 아래와 같이 수정하였습니다.

{
  "compilerOptions": {
    ...
    "skipLibCheck": true
  },
  ...
}

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

어린이용 단어 공부앱, 블라부
어린이용 단어 공부 앱
블라부
세상의 모든 정보를 모아보다, 씨로그
세상의 모든 정보를 모아보다
씨로그
JLPT 일본어 단어앱, 일단 공부
JLPT 일본어 단어앱
일단 공부
토익 영어 단어앱, 토익 단어앱
토익 영어 단어앱
토익 단어앱
중고등 영어 단어앱, 중고등 영단어앱
중고등 영어 단어앱
중고등 영단어앱
HSK 중국어 단어앱, 중국어 단어앱
HSK 중국어 단어앱
중국어 단어앱
독일어 단어앱, 독일어 단어장
독일어 단어앱
독일어 단어장
러시아어 단어앱, 러시아어 단어장
러시아어 단어앱
러시아어 단어장
아랍어 단어앱, 아랍어 단어장
아랍어 단어앱
아랍어 단어장
인도네시아 단어앱, 인도네시아 단어장
인도네시아 단어앱
인도네시아 단어장
프랑스어 단어앱, 프랑스어 단어장
프랑스어 단어앱
프랑스어 단어장
스페인어 단어앱, 스페인어 단어장
스페인어 단어앱
스페인어 단어장

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통
Posts
  • Previous
  • Next