[ styled-components ] pseudo selector를 사용하여 불필요한 styled-component 사용하지 않기

📍 pseudo selector를 사용하여 불필요한 styled-component 사용하지 않기

css 스타일링을 하다 보면 제일 마지막 글자만 다른 색상으로 나타내야 하는데, 번거롭게 styled-component를 하나 더 만들어서 관리하는 경우가 있다. 그럴 때 여러 가지 방법이 있지만 가상 선택자를 이용하면 코드를 줄이고, 직관적으로 스타일을 꾸밀 수 있다. 예를 들자면, FormTitle을 만드는데 필수로 입력 해야하는 *를 FormTitle 제일 마지막에 붙여야하는 경우가 있다.

 

처음에는 FormTitle과 Required 컴포넌트를 따로 만들어서 하단 코드 블록처럼 관리했다. 코드 블록에 대해 간단하게 설명하자면 FormTitle의 props에는 required가 들어오고(이때 required의 타입은 boolean이다.), required가 true이면 내부 span태그의 color는 red로 설정하고 required가 false이면 color를 설정하지 않는 코드이다.

// form.tsx
interface FormTitleProps {
  required: boolean
}

const FormTitle = styled.div<FormTitleProps>`
  ${({ required }) =>
    required &&
    css`
      span {
        color: red;
      }
    `}
`

function App() {
    return (
      <FormTitle required>
        이메일 주소 <Required />
      </FormTitle>
  )
}

// required.tsx
export function Required() {
  return <span>*</span>
}

728x90

이렇게 작성하다보니 불필요하게 새로 required.tsx파일을 만들어 관리해야하는 번거로움과 코드가 한 번에 읽히지 않는다는 문제가 있었다. 이럴 때 pseudo selector 중 하나인 ::after를 사용하면 코드를 조금 더 직관적으로 바꿀 수 있다. ::after는 HTML코드 뒤에 content property로 내용을 삽입할 수 있다. 이와 비슷한 가상 선택자로는 ::before가 있는데, 이는 HTML코드 앞에 content property로 내용을 삽입할 수 있다. 결론적으로 ::after를 사용하여 다음처럼 리팩토링을 진행했다.

// form.tsx
interface FormTitleProps {
  required: boolean
}

const FormTitle = styled.div<FormTitleProps>`
  ${({ required }) =>
    required &&
    css`
      ::after {
        content: " *";
      }
    `}
`

function App() {
    return (
      <FormTitle required>
        이메일 주소
      </FormTitle>
  )
}

이번 글을 통해 스타일을 하나 지정한다고 해서 무조건 스타일 컴포넌트로 새로운 컴포넌트를 만들기보다 가상 선택자와 같은 css 기본 속성을 이용하면 더 간단하게 구현할 수 있다는 점을 배웠다.

 

Reference

1. https://www.w3schools.com/cssref/sel_after.asp
2. https://www.w3schools.com/cssref/sel_before.asp
3. https://www.w3schools.com/cssref/tryit.asp?filename=trycss_content