styled-components 03 - props

Q.
styled-components들도, 컴포넌트니까, props를 사용할 수 있는 것인가?

 

 

 

A.

네, styled-components도 React 컴포넌트이기 때문에, props를 사용할 수 있습니다. styled-components에서는 props를 활용하여 스타일을 동적으로 변경하거나, 컴포넌트 내부 로직에 따라 다양한 스타일링을 적용할 수 있습니다.

---

props를 사용한 styled-components의 작동 방식

styled-components에서 props는 스타일 함수 내에서 접근할 수 있으며, 이를 통해 조건부로 스타일을 설정할 수 있습니다.

기본 예제: props로 동적 스타일링

import styled from "styled-components";

// styled.div에서 props를 받아 동적으로 스타일을 설정
const StyledButton = styled.button`
  background-color: ${(props) => (props.primary ? "blue" : "gray")};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${(props) => (props.primary ? "darkblue" : "darkgray")};
  }
`;

function App() {
  return (
    <div>
      <StyledButton primary>Primary Button</StyledButton>
      <StyledButton>Default Button</StyledButton>
    </div>
  );
}

export default App;

결과:

• <StyledButton primary>: 파란색 배경 (primary가 true)
• <StyledButton>: 회색 배경 (primary가 없어서 false)

---

props를 이용한 복잡한 스타일링

예제: 조건부 스타일링 + 여러 props 사용

const Card = styled.div`
  padding: 20px;
  border: 1px solid ${(props) => (props.highlight ? "red" : "#ddd")};
  background-color: ${(props) => props.bgColor || "white"};
  box-shadow: ${(props) =>
    props.elevated ? "0px 4px 6px rgba(0, 0, 0, 0.1)" : "none"};
`;

function App() {
  return (
    <div>
      <Card highlight bgColor="lightyellow" elevated>
        Highlighted and Elevated Card
      </Card>
      <Card>Normal Card</Card>
    </div>
  );
}

결과:

1. highlight가 있는 경우:
   • 빨간 테두리
2. bgColor가 있는 경우:
   • bgColor로 설정된 배경색
3. elevated가 있는 경우:
   • 그림자 추가

---

스타일링 외에도 props 활용 가능

props는 styled-components 내부에서 data-* 속성 전달이나, aria-*와 같은 접근성 속성을 설정할 때도 사용할 수 있습니다.

예제: props를 통해 데이터 속성 전달

const StyledButton = styled.button`
  background-color: blue;
  color: white;
`;

function App() {
  return (
    <StyledButton data-test-id="custom-button">
      Button with Data Attribute
    </StyledButton>
  );
}

---

고급: attrs로 기본 props 설정

styled-components에서는 attrs 메서드를 사용하여 컴포넌트의 기본 props를 설정할 수 있습니다.

const Input = styled.input.attrs((props) => ({
  type: props.type || "text", // 기본값 설정
  placeholder: props.placeholder || "Enter text",
}))`
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
`;

function App() {
  return (
    <div>
      <Input placeholder="Custom Placeholder" />
      <Input />
    </div>
  );
}

결과:

• 첫 번째 <Input>은 "Custom Placeholder"를 표시
• 두 번째 <Input>은 기본값인 "Enter text"를 표시

---

결론

• styled-components는 React 컴포넌트와 동일하게 props를 사용할 수 있습니다.
• 이를 통해 동적 스타일링이 가능하며, 더 나아가 데이터 속성 설정, 접근성 설정, 또는 기본값 설정 같은 다양한 용도로 활용할 수 있습니다.
• props를 사용하면 재사용 가능한 유연한 스타일링을 작성할 수 있어 매우 강력한 도구가 됩니다.

추가로 궁금한 점이 있으면 언제든 물어보세요! 😊