React에서 모듈화된 className 조건2가지 만들기 with module.scss

 

 

REACT에서 module화 된 className 적용방법

 

그냥 기본적인 scss를 작성할때는 className 적용할 때 별 문제없었는데, module화 된 scss를 작업하다보면 갑자기 문법이 헷갈리면서 scss파일이랑 연동이 안돼서 오류가 뜬다.

 

 

 

 

 

 

 

1. scss 모듈일 때, 조건을 걸어서 class에 2개의 module.scss를 적용시킬 때,

 

 <button className={ 
 	isOpen 
    ? `${styles.hamburger} ${styles.isOpen}` 
    :  `${styles.hamburger}`} type='button' onClick={onHamburger}>
 </button>

 

- isOpen일때의 조건이 걸릴 때,

.hamburger와 .isOpen의 클래스를 같이 넣고싶을 때 적용 방식이다.

 

 

 

 

 

 

 

 

 

2. 컴포넌트 파라미터 값을 모듈 scss로 class 적용할 때,

const test = ({type}) => {
  return (
    <div className={`${styles.item} ${styles[type]}`}></div>
  )
};

 

- 파라미터로 받은 { type } 값을 className 내에 모듈화로 삽입하고 싶을 땐 styles[type]으로 값을 적용한다.

 

 

 

 

 

 

 

 

 

3. className에 2가지 조건을 적용 시킬 때,

 

 <header className={`
    ${isSticky ? styles.isSticky : ''} 
    ${isHidden ? styles.isHidden : ''}
   `} 
  >
</header>

 

- 그 동안 3항 연산자의 조건 1개만 걸었는데, 작업하다보니 2가지 조건을 className에 넣어야 하는 경우가 생겼다.

그럴때 백틱(``) 기호 안에서 ${...} 표기법을 이용해서 파라미터를 적용시키면 된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

도움이 되셨다면 공감 또는 광고를 한번식 클릭 부탁드립니다 ♥

저의 에너지원이기 때문이죠 ㅎㅎ