[React] 동적 className 작성법

코드왕·2022년 7월 19일
0
post-thumbnail
post-custom-banner

동적으로 className을 하려면?

백틱과 콧수염을 잘 사용할 것!

▶ 아래와 같은 코드가 있다고 가정 해보자

const [show,setShow]=useState(false);
<nav className={`nav ${show && 'nav__black'}`}>

▶ 아래 코드는 nav라는 className은 가지고 있으면서, show가 true가 되면 nav__black이라는 className이 추가된다.
▶ 어떤 상태 변화(클릭, 체인지,스크롤)가 생겼을 때 CSS의 변화를 주려면 위와 같은 방식으로 사용하면 매우 간결하다.
▶ 별것 아니지만 콧수염과 백틱 JSX의 위치를 잘 숙달하자.

profile
CODE DIVE!

0개의 댓글