Styled Components 사용법

1️⃣ Styled Components란?

Styled Components는 CSS 파일을 연결해서 사용하지 않고 JavaScript 파일 안에서 직접 CSS를 작성한다.

import styled from 'styled-components';

const Container = styled.div`
  background: blue;
  padding: 20px;
`;

function App() {
  return <Container>Hello</Container>;
}

스타일과 컴포넌트가 함께 있으니 관리가 훨씬 쉽고, CSS 파일을 따로 만들 필요가 없다.

---

2️⃣ 설치하기

npm install styled-components

---

3️⃣ 기본 문법

Tagged Template Literals

styled-components는 백틱(`)과 함수 조합을 사용한다.

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

쉽게 말해, styled.버튼이름 + 백틱 안에 CSS를 쓰면 된다.

---

4️⃣ 기본 사용법

HTML 태그로 만들기

import styled from 'styled-components';

// 스타일이 적용된 div 만들기
const Box = styled.div`
  width: 200px;
  height: 200px;
  background-color: lightblue;
  border-radius: 10px;
  padding: 20px;
`;

// 스타일이 적용된 버튼 만들기
const Button = styled.button`
  background-color: green;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

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

export default App;

---

5️⃣ Props로 동적 스타일링하기

같은 컴포넌트를 다르게 스타일링하고 싶다면 props를 사용하면 된다.

import styled from 'styled-components';

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

function App() {
  return (
    <div>
      <Button primary>주요 버튼</Button>
      <Button>보조 버튼</Button>
    </div>
  );
}

---

6️⃣ 기존 컴포넌트에 스타일 적용하기

자신만의 컴포넌트에 styled-components를 적용할 수도 있다.

// MyButton.js
function MyButton({ className, children }) {
  return <button className={className}>{children}</button>;
}

export default MyButton;

// App.js
import styled from 'styled-components';
import MyButton from './MyButton';

const StyledButton = styled(MyButton)`
  background-color: purple;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

function App() {
  return <StyledButton>커스텀 버튼</StyledButton>;
}

---

7️⃣ 스타일 확장하기 (Extending)

기존 스타일을 바탕으로 새로운 스타일을 만들고 싶다면:

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

// Button을 기반으로 더 큰 버튼 만들기
const LargeButton = styled(Button)`
  padding: 20px 40px;
  font-size: 20px;
`;

function App() {
  return (
    <div>
      <Button>일반 버튼</Button>
      <LargeButton>큰 버튼</LargeButton>
    </div>
  );
}

---

8️⃣ Hover, Active 같은 의사 클래스

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background-color: darkblue;
    transform: scale(1.05);
  }

  &:active {
    transform: scale(0.95);
  }
`;

---

9️⃣ 조건부 스타일링

props 값에 따라 완전히 다른 스타일을 적용할 수 있다.

const Alert = styled.div`
  padding: 15px;
  border-radius: 5px;
  font-weight: bold;

  ${props => {
    switch(props.type) {
      case 'success':
        return `
          background-color: #d4edda;
          color: #155724;
          border: 1px solid #c3e6cb;
        `;
      case 'error':
        return `
          background-color: #f8d7da;
          color: #721c24;
          border: 1px solid #f5c6cb;
        `;
      case 'warning':
        return `
          background-color: #fff3cd;
          color: #856404;
          border: 1px solid #ffeeba;
        `;
      default:
        return `
          background-color: #d1ecf1;
          color: #0c5460;
          border: 1px solid #bee5eb;
        `;
    }
  }}
`;

function App() {
  return (
    <div>
      <Alert type="success">성공했습니다!</Alert>
      <Alert type="error">오류가 발생했습니다!</Alert>
      <Alert type="warning">주의하세요!</Alert>
      <Alert>정보입니다!</Alert>
    </div>
  );
}