스타일드 컴포넌트

더 나은 방식을 찾기 위한 여정.
Template Literals - Panda CSS
추후 템플릿 리터널 방식 panda css가 그나마 마이그레이션 가능해보임.

참고한 글들
스타일드 컴포넌트 best practice 참고 글들
Measuring React styled-components performance & best practices
Styled Components Best Practices

그 외 참고
다소 거친 표현이지만 스타일 컴포넌트가 왜 그렇게 사랑받는지 이해하려고 노력했습니다.
스타일이 지정된 컴포넌트 - 모든 컴포넌트가 스타일이 지정된 컴포넌트여야 하나요?
대규모의 확장형 프로젝트에 CSS-in-JS와 CSS 중 어느 것이 더 낫나요?

Styled 모듈로 감싸기

styled-component의 방식 중 큰 인식 저해로 작용하는 것이 스타일만 있는 컴포넌트도 컴포넌트로 판단한다 입니다.
과연 우리는 아래와 같은 구조를 보았을때 page.tsx 파일만 본다면 어떤 것이 기능이 들어가 있고, 어떤 것이 스타일만 있는지 알 수 있을까요?

// page.tsx
const Page = () => <MyDrawer>
	<UserSelect>
		<UserSelectOption />
	<UserSelect/>
<MyDrawer/>



// style.ts
export const UserSelect = styled.select`` // ...
export const UserSelectOption = styled.option`` // ...

이러한 문제를 방지하기 위해 reddit에서의 여론들이나, styled-component best practices들을 보면, 스타일드 컴포넌트를 사용시에는 꼭 S, Styled 같이 감싸서 쓰라고 조언하고 있습니다.

// page.tsx
const Page = () => <MyDrawer>
	<Styled.UserSelect>
		<Styled.UserSelectOption />
	<Styled.UserSelect/>
<MyDrawer/>

	  
// style.ts
module Styled {
	export const UserSelect = styled.select``
	export const UserSelectOption = styled.select``
}
export default Styled

위와 같이 작성되어 있다면 Styled내에서 어떤 effect들이 일어날지 두려워하지 않아도 됩니다. 단순 스타일만 있는, className이 지정된 것과 같은 느낌으로 보면 되니깐요.
스타일된 컴포넌트들을 하나하나 기억을 더듬으며 찾아서 사용할 필요도 없습니다.
이름이 겹쳐서 수 많은 컴포넌트 리스트 중에서 고를 필요도 없으므로 이름도 단순하게 지을 수 있습니다.
네이밍 export가 아니므로 Styled를 import 넣으려고 할때 수 많은 리스트도 뜨지 않습니다.

props값으로 동적 css 처리하는 것이 더 나은가??

개인적으로 data-로 하는게 직관적이라고 생각합니다.

동적 props처리가 되지 않으므로 추후 마이그레이션하기도 훨신 유리하고, 해당 css를 그대로 옮겨 module.css 같은 것으로 한다면 SSR 지원도 가능합니다.

하지만 문제가 있으니...
앞에 매번 data-를 붙혀 쓰는게 기분이 나쁘긴 합니다......

<div>
	<MyButton data-active data-theme="primary" />
<div>

From

To

Parts레시피

어짜피 외부로 export해서 사용하지 않을 컴포넌트들을 열심히 styled 컴포넌트로 만드느라 시간을 소비할 필요가 있을까요?
외부에서 사용할 수 있게 하려면 - Slot 방식 사용

pandacss 참고해서 좋은 방법 찾아서 작성할 예정.

panda css에서 발췌

기타 참고

stylis
여기서 미리 파싱되는 스타일 확인 가능

아래 두 코드는 같은 특수성을 가지지만, 선순위 후순위 차이로 &{}로 감싸야지만 적용됨
&{}로 감싸여지면 해당 내용이 더 밑으로 내려감

&{} 감싸지 않은 코드

export const StyledNotificationItem = styled.div<{ isLink?: boolean }>`
  &:where(button) {
    ${defaultButtonCss};
  }

    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    color: ${contents000};
`;

&{} 감싼 코드

export const StyledNotificationItem = styled.div<{ isLink?: boolean }>`
  &:where(button) {
    ${defaultButtonCss};
  }

  & {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    color: ${contents000};
  }
`;