[React] 클래스 이름 함수와 섞기

 

<button className={`finishBtn Btn ${btnColorSwitch()}`} 
                    onClick={() => prop.finishBtn(prop.id)}
                    >
                    {tagSwitch(prop.isDone)}
                    </button>

 

className 안에서 중괄호{} 로 자바스크립트 문법을 사용 가능하게 한 뒤

`` 백틱을 활용해 문자열과 함수를 섞으면 원하는 조건문을 활용할 수 있다.

 

삼항연산자를 이용해 조건문을 사용할 수도 있지만,

그렇게 되면 문자열과 섞을 수 없고

조건문에 값만 입력할 수 있기 때문에

 

디폴트 클래스 값은 그대로 두고

${} 을 이용해 중간에 조건문 함수를 삽입하면

클래스의 조건문과 디폴트 값을 동시에 사용할 수 있다.