Styled-Components로 리액트 스타일링

byCode Keeper •


Styled-Components로 리액트 스타일링


리액트 애플리케이션을 개발할 때 스타일링은 매우 중요한 요소입니다. CSS를 전통적으로 사용해도 되지만, CSS-in-JS 접근법을 통해 더 나은 코드 구조와 유지보수성을 얻을 수 있습니다. Styled-Components는 리액트 컴포넌트에 스타일을 적용하는 CSS-in-JS 라이브러리로, 이를 사용하면 컴포넌트 기반의 스타일링을 쉽게 구현할 수 있습니다. 이번 포스팅에서는 Styled-Components를 사용하여 리액트 애플리케이션을 스타일링하는 방법을 소개하겠습니다.


Styled-Components의 중요성


Styled-Components는 CSS-in-JS 접근법을 통해 다음과 같은 장점을 제공합니다:

  • 모듈화된 스타일: 각 컴포넌트에 고유한 스타일을 적용하여 스타일 충돌을 방지합니다.
  • 동적 스타일: 컴포넌트의 props를 통해 동적으로 스타일을 변경할 수 있습니다.
  • 유지보수성 향상: 스타일과 로직이 같은 파일에 존재하여 관리가 용이합니다.

프로젝트 설정 및 Styled-Components 설치


Styled-Components를 사용하기 위해 필요한 패키지를 설치합니다. 다음 명령어를 사용하여 프로젝트를 생성하고 필요한 패키지를 설치합니다.


npx create-react-app my-styled-components-app
cd my-styled-components-app
npm install styled-components

프로젝트 구조


프로젝트는 기본적으로 다음과 같은 구조를 가집니다.


my-styled-components-app/
├── src/
│   ├── components/
│   ├── App.js
│   ├── index.js
├── public/
├── package.json
└── README.md

이제 Styled-Components를 사용하여 컴포넌트를 스타일링하는 방법을 살펴보겠습니다.


기본 사용법


Styled-Components는 styled 함수를 사용하여 스타일이 적용된 컴포넌트를 생성합니다.


기본 컴포넌트 스타일링


다음은 버튼(Button) 컴포넌트를 스타일링하는 예제입니다.


// src/App.js
import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background: #4caf50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;

  &:hover {
    background: #45a049;
  }
`;

function App() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <Button>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

export default App;

위 코드에서는 styled.button 함수를 사용하여 버튼 컴포넌트를 생성하고, 스타일을 정의합니다.


동적 스타일링


Styled-Components를 사용하면 컴포넌트의 props를 통해 동적으로 스타일을 변경할 수 있습니다.


// src/App.js
import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? '#4caf50' : '#008cba'};
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;

  &:hover {
    background: ${props => props.primary ? '#45a049' : '#007bb5'};
  }
`;

function App() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

export default App;

위 코드에서는 primary props를 통해 버튼의 색상을 동적으로 변경합니다.


테마 사용


Styled-Components는 테마를 사용하여 애플리케이션의 스타일을 일관되게 관리할 수 있습니다. ThemeProvider를 사용하여 테마를 정의하고 적용할 수 있습니다.


테마 정의


먼저, 테마를 정의합니다.


// src/theme.js
export const theme = {
  primary: '#4caf50',
  secondary: '#008cba',
  font: 'Arial, sans-serif',
};

테마 적용


ThemeProvider를 사용하여 애플리케이션에 테마를 적용합니다.


// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from 'styled-components';
import { theme } from './theme';

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

테마 사용


컴포넌트에서 테마를 사용하려면 props.theme를 참조합니다.


// src/App.js
import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? props.theme.primary : props.theme.secondary};
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  font-family: ${props => props.theme.font};

  &:hover {
    background: ${props => props.primary ? '#45a049' : '#007bb5'};
  }
`;

function App() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

export default App;

위 코드에서는 props.theme를 사용하여 테마 값을 참조하고, 버튼 스타일에 적용합니다.


글로벌 스타일 적용


Styled-Components를 사용하면 전역 스타일도 쉽게 정의할 수 있습니다.


// src/globalStyles.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: ${props => props.theme.font};
  }
`;

export default GlobalStyle;

전역 스타일을 정의한 후, 애플리케이션에 적용합니다.


// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from 'styled-components';
import { theme } from './theme';
import GlobalStyle from './globalStyles';

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <GlobalStyle />
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 Styled-Components를 사용하여 리액트 애플리케이션을 스타일링하는 방법에 대해 살펴보았습니다. Styled-Components는 컴포넌트 기반의 스타일링을 제공하여 모듈화된 스타일, 동적 스타일, 테마 관리, 글로벌 스타일 적용을 쉽게 할 수 있습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전