React & Next.js

styled-components와 css 함수를 활용한 효율적인 스타일링 기법

0

`styled-components`는 React 애플리케이션에서 CSS를 JavaScript 코드로 작성할 수 있게 해주는 강력한 라이브러리입니다. 이를 통해 CSS 코드와 React 컴포넌트를 더욱 긴밀하게 결합할 수 있으며, 스타일링을 모듈화하고 유지 보수성을 높일 수 있습니다. 특히, `css` 함수를 활용하면 조건부 스타일링, 재사용 가능한 스타일 조각, 중첩된 스타일을 더 쉽게 작성할 수 있습니다. 이 기사에서는 `styled-components`와 `css` 함수의 기본 사용법과 활용 사례를 자세히 살펴보겠습니다.

설치하기

먼저, `styled-components`를 설치해야 합니다. npm 또는 yarn을 사용하여 다음 명령어를 실행합니다:

npm install styled-components
or
yarn add styled-components

기본 사용법

`styled-components`를 사용하여 스타일을 정의하고 이를 React 컴포넌트에 적용할 수 있습니다. 예를 들어, 기본 버튼 스타일을 정의하는 방법은 다음과 같습니다:

import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  padding: 0.5em 1em;
  font-size: 1em;
  cursor: pointer;

  &:hover {
    background: darkviolet;
  }
`;

const App = () => (
  <div>
    <Button>Click Me</Button>
  </div>
);

export default App;

css 함수의 역할과 활용

`css` 함수는 `styled-components`에서 스타일을 더 유연하고 재사용 가능하게 작성할 수 있게 해줍니다. 이를 통해 스타일링을 모듈화하고 유지 보수성을 높일 수 있습니다.

조건부 스타일링

`css` 함수를 사용하여 조건부 스타일링을 더 간편하게 작성할 수 있습니다. 예를 들어, 버튼의 종류에 따라 다른 스타일을 적용하고자 할 때 유용합니다.

import styled, { css } from 'styled-components';

const buttonStyles = css`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
`;

const Button = styled.button`
  ${buttonStyles}
  border: 2px solid palevioletred;
  border-radius: 3px;
  padding: 0.5em 1em;
  font-size: 1em;
  cursor: pointer;

  &:hover {
    background: ${props => props.primary ? 'darkviolet' : 'lightgray'};
  }
`;

const App = () => (
  <div>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </div>
);

export default App;

스타일 조각 재사용

`css` 함수를 사용하여 여러 컴포넌트에서 재사용할 수 있는 스타일 조각을 정의할 수 있습니다. 이를 통해 코드의 중복을 줄이고 일관성을 유지할 수 있습니다.

import styled, { css } from 'styled-components';

const sharedStyles = css`
  border-radius: 3px;
  padding: 0.5em 1em;
  font-size: 1em;
  cursor: pointer;
`;

const Button = styled.button`
  ${sharedStyles}
  background: palevioletred;
  color: white;
  border: none;

  &:hover {
    background: darkviolet;
  }
`;

const Input = styled.input`
  ${sharedStyles}
  border: 2px solid palevioletred;
  color: palevioletred;
`;

const App = () => (
  <div>
    <Button>Click Me</Button>
    <Input placeholder="Type here..." />
  </div>
);

export default App;

중첩된 스타일

`css` 함수를 사용하여 중첩된 스타일을 정의할 수도 있습니다. 이는 복잡한 스타일링을 더 간결하고 읽기 쉽게 만듭니다.

import styled, { css } from 'styled-components';

const nestedStyles = css`
  &:hover {
    color: darkviolet;
    span {
      text-decoration: underline;
    }
  }
`;

const StyledLink = styled.a`
  color: palevioletred;
  ${nestedStyles}
`;

const App = () => (
  <div>
    <StyledLink href="#">
      Hover over me <span>and underline me!</span>
    </StyledLink>
  </div>
);

export default App;

테마 사용하기

`ThemeProvider`를 사용하여 테마를 설정하고, 이를 스타일에 적용할 수 있습니다. 이는 애플리케이션 전반에 걸쳐 일관된 스타일을 적용하는 데 유용합니다.

import styled, { ThemeProvider } from 'styled-components';

const theme = {
  primary: 'palevioletred',
  secondary: 'darkviolet',
};

const Button = styled.button`
  background: ${props => props.theme.primary};
  color: white;
  padding: 0.5em 1em;
  border: none;
  border-radius: 3px;
  font-size: 1em;
  cursor: pointer;

  &:hover {
    background: ${props => props.theme.secondary};
  }
`;

const App = () => (
  <ThemeProvider theme={theme}>
    <div>
      <Button>Themed Button</Button>
    </div>
  </ThemeProvider>
);

export default App;

글로벌 스타일 정의하기

`createGlobalStyle`을 사용하여 전역 스타일을 정의할 수 있습니다. 이는 애플리케이션의 기본 스타일을 설정하는 데 유용합니다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
  }
`;

const App = () => (
  <>
    <GlobalStyle />
    <div>
      <h1>Hello World</h1>
    </div>
  </>
);

export default App;

결론

`styled-components`는 CSS-in-JS 패러다임을 통해 CSS 코드와 React 컴포넌트를 더욱 긴밀하게 결합할 수 있게 해주는 강력한 도구입니다. `css` 함수는 스타일을 더 유연하고 재사용 가능하게 작성할 수 있게 해주어 조건부 스타일링, 재사용 가능한 스타일 조각, 중첩된 스타일 작성에 매우 유용합니다. 이를 통해 스타일링을 모듈화하고 유지 보수성을 높일 수 있습니다. 위의 예제들을 참고하여 자신만의 스타일을 적용해 보세요!

답글 남기기