[React] Styled-Components를 사용해보자

Styled-Components란 ?

Styled-Components는 자바스크립트에서 CSS를 작성할 수 있게 해주는 라이브러리입니다. React와 같은 프레임워크에서 많이 사용되며, 컴포넌트 기반으로 스타일을 관리함으로써 스타일링과 로직을 한 곳에 통합할 수 있습니다. 이는 CSS 클래스의 이름 충돌을 방지하고, 동적 스타일을 쉽게 구현할 수 있는 장점을 제공합니다.

Styled-Components 사용

Styled-Components는 컴포넌트별로 고유한 스타일을 정의할 수 있습니다. 이를 위해 먼저 styled-components 라이브러리를 설치하고, 자바스크립트 파일에서 CSS를 정의할 컴포넌트를 생성합니다.

설치

npm install styled-components

예시

import styled from 'styled-components';

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

  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return <Button>클릭하세요</Button>;
}

export default App;

Styled-Components의 활용 예제

1. 동적 스타일

Props를 활용해 스타일을 동적으로 변경할 수 있습니다.

const Button = styled.button`
  background-color: ${props => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px;
`;

function App() {
  return (
    <>
      <Button primary>Primary 버튼</Button>
      <Button>기본 버튼</Button>
    </>
  );
}

2. 글로벌 스타일

createGlobalStyle를 사용하면 전역 스타일을 설정할 수 있습니다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <div>전역 스타일이 적용된 페이지입니다.</div>
    </>
  );
}

export default App;

3. 스타일 재사용

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

const flexMixin = css`
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Box = styled.div`
  ${flexMixin};
  width: 200px;
  height: 200px;
  background-color: lightcoral;
`;

function App() {
  return <Box>Centered Box</Box>;
}

export default App;