Emotion을 사용한 리액트 스타일링

byCode Keeper •


Emotion을 사용한 리액트 스타일링


리액트(React) 애플리케이션을 개발할 때, 컴포넌트의 스타일링은 중요한 부분 중 하나입니다. CSS-in-JS 라이브러리 중 하나인 Emotion은 강력하고 유연한 스타일링 솔루션을 제공합니다. Emotion을 사용하면 스타일을 자바스크립트 내에서 직접 작성하고, 컴포넌트와 스타일을 더욱 쉽게 관리할 수 있습니다. 이번 포스팅에서는 Emotion을 사용하여 리액트 컴포넌트를 스타일링하는 방법을 자세히 살펴보겠습니다.


Emotion의 중요성


Emotion은 다음과 같은 장점을 제공합니다:

  • CSS-in-JS: 스타일을 자바스크립트 파일 내에서 작성할 수 있어 코드와 스타일을 동일한 파일에서 관리할 수 있습니다.
  • 강력한 성능: Emotion은 CSS를 최소화하고, 필요한 경우에만 CSS를 동적으로 삽입하여 성능을 최적화합니다.
  • 유연성: Emotion은 다양한 스타일링 방법을 제공하여 개발자가 원하는 방식으로 스타일을 적용할 수 있습니다.

프로젝트 설정 및 Emotion 설치


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


npx create-react-app my-emotion-app --template typescript
cd my-emotion-app
npm install @emotion/react @emotion/styled

프로젝트 구조


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


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

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


기본 사용법


Emotion을 사용하여 기본적인 스타일링을 적용하는 방법을 살펴보겠습니다.


css 함수 사용


먼저, css 함수를 사용하여 스타일링하는 방법을 알아보겠습니다.


// src/App.tsx
import React from 'react';
import { css } from '@emotion/react';

const buttonStyle = css`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;

  &:hover {
    background-color: #0056b3;
  }
`;

const App: React.FC = () => {
  return (
    <div>
      <button css={buttonStyle}>Click Me</button>
    </div>
  );
};

export default App;

위 코드에서는 css 함수를 사용하여 버튼 스타일을 정의하고, css 속성을 통해 버튼에 스타일을 적용합니다.


styled 함수 사용


다음으로, styled 함수를 사용하여 스타일링하는 방법을 알아보겠습니다.


// src/App.tsx
import React from 'react';
import styled from '@emotion/styled';

const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;

  &:hover {
    background-color: #0056b3;
  }
`;

const App: React.FC = () => {
  return (
    <div>
      <Button>Click Me</Button>
    </div>
  );
};

export default App;

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


테마 사용


Emotion은 테마를 사용하여 스타일을 일관성 있게 관리할 수 있습니다.


테마 정의


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


// src/theme.ts
const theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
  },
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px',
  },
};

export default theme;

테마 제공


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


// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@emotion/react';
import theme from './theme';

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

테마 사용


컴포넌트에서 테마를 사용하여 스타일을 적용합니다.


// src/App.tsx
import React from 'react';
import styled from '@emotion/styled';
import { useTheme } from '@emotion/react';

const Button = styled.button`
  background-color: ${(props) => props.theme.colors.primary};
  color: white;
  padding: ${(props) => props.theme.spacing.medium};
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;

  &:hover {
    background-color: #0056b3;
  }
`;

const App: React.FC = () => {
  const theme = useTheme();

  return (
    <div>
      <Button>Click Me</Button>
      <p>Current theme primary color: {theme.colors.primary}</p>
    </div>
  );
};

export default App;

위 코드에서는 useTheme 훅을 사용하여 테마를 가져오고, styled 함수를 사용하여 스타일에 테마 값을 적용합니다.


글로벌 스타일 적용


Emotion을 사용하여 글로벌 스타일도 쉽게 적용할 수 있습니다.


// src/globalStyles.ts
import { css, Global } from '@emotion/react';

const globalStyles = css`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
  }
`;

const GlobalStyles: React.FC = () => {
  return <Global styles={globalStyles} />;
};

export default GlobalStyles;

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


// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@emotion/react';
import theme from './theme';
import GlobalStyles from './globalStyles';

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

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


이 포스팅에서는 Emotion을 사용하여 리액트 컴포넌트를 스타일링하는 방법에 대해 살펴보았습니다. Emotion은 CSS-in-JS 접근 방식을 제공하여, 컴포넌트와 스타일을 같은 파일에서 관리할 수 있으며, 테마와 글로벌 스타일 적용을 통해 일관성 있는 스타일링을 구현할 수 있습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전