React Styled Component에 대해서

---

Styled Component를 알아보며 궁금했던 점

💡 Styled Components를 사용할 때 어떠한 방식으로 props를 관리할까 ?
💡 Styled Components에서 태그 함수란 무엇일까 ? (요건 아직 저도 잘 정리가 안돼요)

---

Styled Component에서 props를 효과적으로 관리하는 방법

문제가 되는 주된 상황: 컴포넌트에 props가 불필요하게 전달이 될 때
아래의 코드를 보면서 설명을 이어가려고 한다.

import styled from 'styled-components';

// Styled Component
const StyledButton = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: ${props => props.color || 'white'};
`;

function App() {
  // 'primary'와 'color' props는 스타일링에 사용되지만, 'clickCount'는 스타일링과 관련 없는 prop입니다.
  return <StyledButton primary color="red" clickCount={5}>Click Me</StyledButton>;
}

위의 코드에서 StyledButton은 primary와 color, clickCount를 props로 받는다.
하지만 StyleButton을 보면 알겠듯이 clickCount는 동작 함수로 스타일링과는 관계가 없어 HTML에 불필요한 속성으로 나타나게 된다

✔️ 방법 1

const StyledButton = styled.button`
  background-color: ${props => props.$primary ? 'blue' : 'gray'};
  color: ${props => props.$color || 'white'};
`;

function App() {
  return <StyledButton $primary $color="red" clickCount={5}>Click Me</StyledButton>;
}

⭐ Transition Props를 사용하자
달러기호 ($, Transient Props)를 사용하면, 스타일링에만 사용되는 임시 props를 정의할 수 있습니다. 이 props는 이름 앞에 $를 붙여 정의하며, 실제 DOM 요소로 전달되지 않습니다.



✔️ 방법2

const StyledButton = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: ${props => props.color || 'white'};
`;

// primary와 color, props는 따로 정의 되어있다고 가정
function CustomButton({ primary, color, ...props }) {
  return <StyledButton primary={primary} color={color} {...props}>Click Me</StyledButton>;
}

function App() {
  return <CustomButton primary color="red" clickCount={5}>Click Me</CustomButton>;
}

⭐ 우리가 잘 알고있는 구조분해 할당을 사용하기
위의 코드와 같이 해결 할 수 있다.

❗ 요약: Transient Props 방법은 스타일링에만 사용되는 props를 명확하게 구분하는 반면, 구조 분해 할당 방법은 필요한 props만을 선택적으로 전달하는 데 유용하다.

내가 배우는 단계에서 이러한 자잘한 구분(?)이 필요 있을까 생각이 되지만, 알아두면 나중에 쓸 일이 있지 않을까,,

---