create-react-app에서 styled-components

2021-01-21 hit count image

create-react-app으로 생성한 React 프로젝트에 styled-components를 적용하는 방법에 대해서 알아봅시다.

create-react-app 시리즈

이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 create-react-app의 시리즈 리스트입니다.

개요

이번 블로그 포스트에서는 React 프로젝트에 styled-components를 적용하는 방법에 대해서 알아봅시다.

이 블로그 포스트에서 사용하는 소스코드는 TypeScript가 적용된 소스 코드를 사용할 예정입니다.

여기서 소개한 소스코드는 아래에 링크를 통해 확인할 수 있습니다.

프로젝트 생성

다음 명령어를 사용하여 React 프로젝트를 생성합니다.

npx create-react-app my-app --template=typescript

그리고 다음 명령어를 사용하여 React 프로젝트를 실행해 봅니다.

# cd my-app
npm start

문제없이 React 프로젝트가 실행되면 아래와 같은 화면을 브라우저에서 확인할 수 있습니다.

create-react-app with styled-components

styled-components 설치

create-react-app으로 생성한 React 프로젝트에 styled-components를 적용하기 위해 필요한 라이브러리를 설치할 필요가 있습니다. 다음 명령어를 통해 styled-components에 필요한 라이브러리를 설치합니다.

npm install --save styled-components

그리고 저는 React 프로젝트에 TypeScript를 사용함으로, 다음 명령어를 통해 styled-components의 타입과 테스트에 필요한 라이브러리를 설치하였습니다.

npm install --save-dev @types/styled-components jest-styled-components

사용법

이제 styled-components를 사용하여 간단한 컴포넌트를 만들어 보겠습니다. ./src/App.tsx 파일을 열고 다음과 같이 수정합니다.

import React from 'react';
import Styled from 'styled-components';

const Container = Styled.div`
  background: red;
  width: 100%;
`;
const Label = Styled.div`
  color: white;
  padding: 20px;
`;

const App = () => {
  return (
    <Container>
      <Label>Hello World</Label>
    </Container>
  );
}

export default App;

위와 같이 styled-components를 사용하여 JSX에서 바로 스타일을 작성할 수 있습니다.

그리고 더이상 사용하지 않는 다음 파일들을 삭제합니다.

  • App.css
  • logo.svg

더 많은 사용법에 관해서는 공식 홈페이지를 참고하시기 바랍니다.

완료

이번 블로그 포스트에서는 create-react-app으로 생성한 React 프로젝트에 styled-components를 적용하는 방법에 대해 알아보았습니다. 그리고 간단하게 JSX 파일에서 styled-components를 사용하는 방법에 대해서도 알아보았습니다.

이제 여러분도 JSX 파일에서 styled-components를 사용하여 스타일링 해 보시기 바랍니다.

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

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

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

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
Posts