[React] styled-components 조건부 스타일링

React에서 styled-components를 사용하여 조건부 스타일링 하려면 이렇게 할 수 있다:

import styled from 'styled-components';

interface HeaderContentProps {
  $showBackButton?: boolean;
}

const HeaderContent = styled.div<HeaderContentProps>`
  ${({ $showBackButton }) =>
    $showBackButton
      ? 'padding: 0 20px;'
      : 'margin: auto;'}
`;

export default HeaderContent;

• HeaderContent 컴포넌트가 받을 수 있는 props를 지정하는 인터페이스 HeaderContentProps를 정의한다.
• styled-components에서 styled.div 함수를 사용하여 스타일이 적용된 <div> 컴포넌트를 생성한다.
• template literal 내부에서 삼항 연산자를 사용하여 $showBackButton prop의 값에 따라 스타일을 조건부로 적용한다. $showBackButton이 true인 경우 패딩을 적용하고, 그렇지 않으면 마진을 적용한다.

<HeaderContent $showBackButton={true}>...</HeaderContent>
<HeaderContent>...</HeaderContent>

• 이렇게 필요 시 $showBackButton prop을 전달해준다.