react에서 css module 사용시 자식 컴포넌트에서 css를 정의하고 className만 부모 컴포넌트에 props로 전달 하기

import { toggleVariant } from '@/utils/animation/toggle-variant';
import { motion } from 'framer-motion';
import React, { FC, PropsWithChildren } from 'react';

const LayerModalVariantWrapper: FC<
	PropsWithChildren<{ className?: string }>
> = ({ children, className }) => {
	return (
		<motion.div variants={toggleVariant} className={className}>
			{children}
		</motion.div>
	);
};

export default LayerModalVariantWrapper;

 

똑같은 코드발생으로 인해 wrapper를 이용해서 관리 하려고 했는데 보통 className이 없지만 특정 layer-modal 컴포넌트에서 className을 사용해서 스타일링이 필요했고 그렇다고 Wrapper를 만들었는데 기존 div에 Wrapper로 감싸면 의미가 있나 싶어서 자식에서 className과 scss로 스타일링을 하고 props로 className을 전달 해주니 css가 잘 적용 되었다.

 

// 자식 컴포넌트
<LayerModalVariantWrapper className={styles.tourism_detail_container}>
...
...
...
</LayerModalVariantWrapper>

기존적으로 JSX HTMLAttributes에서 className가 string으로 추론 되어 있어서
(property) HTMLAttributes<T>.className?: string | undefined
부모 컴포넌트에 string또는 옵셔널로 props를 받았다.