본문 바로가기
Aaron[에런]/Trouble Shootings

[Trouble Shootings #3] React - module scss 이용 시 component prop으로 custom className을 넘겼을 때의 처리

by Aaron-Kim 2022. 9. 21.

회사에서 업무를 하다가 module scss 관련 트러블 이슈가 발생하였습니다.

 

자주 사용되는 재사용 가능한 컴포넌트를 하나 만들고 사용하고 있었는데

 

디자인 커스터 마이징이 필요하였습니다.

 

그래서 재사용 컴포넌트(자식 컴포넌트)를 사용하는 상위 컴포넌트에서 module scss를 import 한 styles를 이용하여

 

styles['module scss class 명'] 형태로 props을 넘겨서

 

하위 컴포넌트에서 styles[className(변수)] 형태로 처리하니 undefined로 class 명이 나오게 됩니다.

 

처음에는 module scss여서 해당 파일에만 scoped 되어 못 넘기는 건가

 

아니면 어디선가 중복되서 꼬인건가 고민이었습니다.

 

하지만 생각해보니 상위 컴포넌트에서 styles로 감싸 prop으로 보내면

 

하위에서는 styles로 감싸면 안된다는 것을 깜빡하였습니다.

 

당연하게도 상위에서 styles로 감싸면 module scss의 특성으로 class 뒷 부분이 랜덤으로 생성되어 unique 해지는데

 

그걸 다시 하위에서 styles로 감싸고 있으니

 

하위 컴포넌트의 module scss에는 해당 클래스명이 없으니 undefined로 class 명이 찍히게 되는 것입니다.

 

따라서 하위에서는 ${ } 템플릿 리터럴 형태로 감싸줘야 합니다.

 

그러면 문제가 해결됩니다.

 

만약 반대로 상위 컴포넌트에서 styles를 감싸주지 않고

 

클래스 이름만 string 형태로 넘기면 하위에서는 styles 로 감싸주면 작동합니다.

 

하지만 한 가지 생각해 볼 것이 있습니다.

 

저는 분명 module scss는 해당 파일에 종속적으로 의존하는 것인줄 알았는데

 

다른 컴포넌트에서 조합된 className 도 하위로 prop으로 보낼 수가 있게 됩니다.

 

상위 컴포넌트에서 module scss로 감싸서 이미 css가 조합된 것이 prop으로 넘어가도 잘 작동하는 것 같습니다.

 

사소한 부분이었지만 생각 없이 당연하게 사용하고 있다가 약간 헤맸습니다.

 

항상 깨어있어야 하는 것이 중요할 것 같습니다.


p.s 1) 추가적으로 각 방법 중 어떤 방식이 더 올바른지는 잘 모르겠습니다.

상위에서 조합된 것을 아래로 그냥 넘기는 것 보다는 하위에 module scss 에 이미 작성해두고

상위에서는 class 이름만 넘겨서 처리하는 것도 괜찮아 보입니다.

 

하지만 동적으로 계속 변경된다면 그것도 쉽지는 않을 것 같습니다.

아무래도 재사용 컴포넌트 설계가 잘못된 것 같지만 우선 여러 가지 상황들을 고려하면서

어떤 것이 최적의 방법일지 계속 탐구하고 고민이 필요해 보입니다.

 

p.s 2) 물론 styles 라고 표현한 것은

import styles from 'something.module.scss'; 구문에서

styles[class명] 으로 표현한 것입니다.

styles.class명으로 해도 되지만 가끔 다른 특수 기호가 들어가면 처리가 안되어
(BEM 규칙을 따르는 것이 좋아 보입니다.)

[ ] 대괄호를 이용하였습니다.

반응형

댓글