react 리액트 classname 에 조건문 2개 가능할까요?

Question

안녕하세요.

이런식으로 삼항 연산자를 이용해서 조건문에 의한 classname을 변경하고 있습니다.한요소에 다른 조건문 을 넣으려고 하니 에러가 납니다.

이렇게 조건문을 한 요소에 두개를 작성할 수 있는 방법이 있을까요?답변 해주시면 정말 천재십니다.

doooss · Answer

여러가지 방법이 있지만 쉬운 방법은 `` 으로 사용하시면 됩니다. `${onClick ? "active" ? ""} ${ishovering?: "open" : ""}`

몰랑토끼 · Answer

한줄에 다 정의한 3항연산자는 가독이 안좋으니 classnames 쓰세요clsx를 쓰더라도 한줄에 정리되는건 안좋습니다.

Chobby · Answer

삼항연산자는 참과 거짓의 값을 각각 정해진 값으로 반환하고 싶을 때 사용하는 것이 좋습니다. 작성자분과 같은 경우는 && 연산자를 사용하는것이 좋을 것 같습니다. &#96;${onClick && &#34;active&#34;} ${ishovering && &#34;open&#34;} &#96;

Hee Sung Son · Answer

classnames와 같은 clsx로 표현시 가독성과 결과물다 챙길 수 있습니다. 아래 예시를 확인해보세요

아 그리고 결과물이라고하면 실제 html 파일을 보면 해당조건이 아닐시 undefined가 class에 보이는 증상이 없다보니 전 이방식을 선호합니다.

react 리액트 classname 에 조건문 2개 가능할까요?

4개의 답변

#classname 목록