[아웃소싱 프로젝트] - tailwind에 동적 스타일링이 적용되지 않을 때

문제 상황

width값을 다르게 받을 수 있는 공통 컴포넌트를 하나 만들었다.

tailwind를 사용하고 있었기 때문에 `백틱`과 `${}`을 이용해서 width값을 설정해야했다.

근데 width값이 원하는대로 설정되지 않는 문제가 발생하였다.

const JobItem = ({ job, width }) => {
  return <div className={`flex w-[${width}px] mx-auto items-center justify-between gap-4 rounded-xl bg-white p-10`}></div>
}

개발자 도구를 열어 확인해보니 props로 전달받은 width값이 잘 적용이 되지 않고 있었다.

 

왜 이런 문제가 발생하는 것일까?

 

 

문제 원인

검색과 튜터님께 질문을 하여 원인을 파악해본 결과,

✅ 상위 컴포넌트에서 props 받아서 동적으로 클래스를 생성하는 데에 어려움이 있기 때문에, 해당 방식은 사용하지 않는게 좋다고 한다. 공식 문서에서도 그렇게 하지 말라고 나와있다.

 

❌ props를 이용해서 클래스 이름을 동적으로 작성하지 않는다.

function Button({ color, children }) {
  return (
    <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>
      {children}
    </button>
  )
}

 

✅ 빌드 시점에 정적으로 감지할 수 있는 클래스 이름을 props로 넘겨준다.

function Button({ color, children }) {
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500',
    red: 'bg-red-600 hover:bg-red-500',
  }

  return (
    <button className={`${colorVariants[color]} ...`}>
      {children}
    </button>
  )
}

 

 

해결 과정 및 결과

width값을 완전한 클래스 형태로 정해놓고 props에 넘겨주는 것이 좋다는 것을 알게 됐다.

혼자서 결정하기보다 공통 컴포넌트가 들어가는 페이지를 맡으신 분과 상의를 하는 것이 좋겠다는 생각이 들었다.

상의 결과, 마이페이지에 들어갈 때 width값과 채용 리스트 페이지에 들어갈 때 width값이 거의 동일했기 때문에 width를 하나로 고정시키기로 하였다. 즉, width를 props로 전달하지 않는 방식을 택하였다.

 

이거 말고 그냥 인라인 스타일로 width값을 전달해주는 방안도 있었는데, 그렇게 되면 tailwind를 쓰는 의미가 퇴색되는 것 같아 선택하지 않았다.

 

---

[참고자료]

https://velog.io/@jknine929/tailwind-%EB%8F%99%EC%A0%81-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81-%EC%A0%81%EC%9A%A9

https://codingmyoni.tistory.com/entry/TailwindCSS-Tailwind-CSS-%EB%8F%99%EC%A0%81-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81-%EC%A0%81%EC%9A%A9%EB%B2%95-%EC%A3%BC%EC%9D%98%EC%82%AC%ED%95%AD