<button className={`finishBtn Btn ${btnColorSwitch()}`}
onClick={() => prop.finishBtn(prop.id)}
>
{tagSwitch(prop.isDone)}
</button>
className 안에서 중괄호{} 로 자바스크립트 문법을 사용 가능하게 한 뒤
`` 백틱을 활용해 문자열과 함수를 섞으면 원하는 조건문을 활용할 수 있다.
삼항연산자를 이용해 조건문을 사용할 수도 있지만,
그렇게 되면 문자열과 섞을 수 없고
조건문에 값만 입력할 수 있기 때문에
디폴트 클래스 값은 그대로 두고
${} 을 이용해 중간에 조건문 함수를 삽입하면
클래스의 조건문과 디폴트 값을 동시에 사용할 수 있다.
'React' 카테고리의 다른 글
[React] Hooks (useState, useEffect, useRef, uesContext, uesMemo) (2) | 2023.11.09 |
---|---|
[React] 스타일 컴포넌트 (CSS-in-JS) (0) | 2023.11.08 |
[React] 컴포넌트, JSX, Props (1) | 2023.11.01 |
[React] State란? (0) | 2023.11.01 |
[React] 절대경로 지정하는 방법 (0) | 2023.10.31 |