'React' 스타일드 컴포넌트에서 조건부 스타일링 사용법

스타일드 컴포넌트는 React에서  CSS-in-JS 스타일링을

간편하게 적용할 수 있는 라이브러리인데요

 

조건부 스타일링을 통해 컴포넌트의 상태나 props에

따라 동적으로 스타일을 변경할 수 있슴다

 

기본적인 조건부 스타일링

 

예로 들어 버튼의 활성화 상태에 따라 색상을 변경하는 경우 예시 코드와 같이 작성이 가능해요

 

코드예시

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  
  &:hover {
    background: ${props => props.primary ? 'darkblue' : 'darkgray'};
  }
`;

// 사용 예시
<Button primary>Primary Button</Button>
<Button>Default Button</Button>

CSS 클래스와 조건부 스타일링

 

조건에 따라 여러 CSS 클래스를 적용하는 것도 가능하기 때문에 더 복잡한 스타일링을 구현할 수 있슴다

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

const Button = styled.button`
  background: gray;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;

  ${props => props.primary && css`
    background: blue;
    &:hover {
      background: darkblue;
    }
  `}
`;

// 사용 예시
<Button primary>Primary Button</Button>
<Button>Default Button</Button>

 

Theme을 이용한 조건부 스타일링

 

스타일드 컴포넌트의 ThemeProvider와 props를 함께 사용하여 테마 기반의 조건부 스타일링을 구현할 수 있어요!

 

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

const theme = {
  primary: 'blue',
  secondary: 'gray',
  disabled: 'lightgray'
};

const Button = styled.button`
  background: ${props => props.theme.primary};
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;

  ${props => props.disabled && css`
    background: ${props.theme.disabled};
    cursor: not-allowed;
  `}
`;

const App = () => (
  <ThemeProvider theme={theme}>
    <Button>Primary Button</Button>
    <Button disabled>Disabled Button</Button>
  </ThemeProvider>
);

export default App;

 

 

느낀점

 

스타일드 컴포넌트를 활용하면 컴포넌트의 상태나

props에 따라 동적으로 스타일을 변경할 수 있어서

유효성 검사를 하거나 조건에 따른 Css 변경이 가능하기 때문에

사용자의 경험을 높이고 스타일의 완성도 또한 올라갈 것 같습니다.

앞으로 조건부 스타일링 많이 이용하겠습니다 *^^* 끄읏