style prop
상태가 곧 스타일 값이 될 때
active, percent, colorMap처럼 JavaScript 값 하나가 곧 CSS 값으로 연결되는 경우에 읽기 쉽다.
코드 위치
const boxStyle = { backgroundColor: isActive ? blue : gray }
className
CSS 기능과 반복 규칙이 필요할 때
hover, media query, transition, 여러 컴포넌트가 공유하는 레이아웃은 CSS 파일에 두는 편이 안정적이다.
코드 위치
<button className={isActive ? "btn active" : "btn"}>