css 클래스명 여러개

https://webisfree.com/2020-03-24/[react]-classname%EC%9D%84-%EC%A1%B0%EA%B1%B4%EC%97%90-%EB%94%B0%EB%9D%BC-%EC%97%AC%EB%9F%AC%EA%B0%9C-%EB%8B%A4%EC%9D%B4%EB%82%98%EB%AF%B9%ED%95%98%EA%B2%8C-%EC%84%A0%EC%96%B8%ED%95%98%EA%B8%B0

! 여러개의 클래스 명을 조건에 맞게 추가하기
이번에는 변수를 사용해 조건식을 따르되 하나가 아닌 여러개인 경우입니다. 먼저 다른 프레임워크를 생각해보면? 배열에 여러개의 객체를 사용하죠. 하지만 React는 그냥 문자열에 띄워쓰기를 사용하면 됩니다. 생각해보면 더 간단하죠? 예를들어 아래 예제를 보세요.
// 변수 선언 부분
this.state = {
isActive: false
}

<i className={ 'btn' + (isActive ? ' active' : '') }>

위 예제와 비슷합니다. 다만 먼저 선언된 'btn'이 보이시죠? 우리가 얻고자 하는 결과는 btn active 또는 btn 둘 입니다. 다만 isActive에 값에 따라 다이나믹하게 변해야하겠죠~
위 코드처럼 문자열로 띄워쓰기를 사용하면 여러개의 클래스를 선언할 수 있습니다. 다만 주의할 점이 있습니다. 바로 괄호의 사용입니다.

@ 괄호 사용에 주의할 것
만약 하나의 클래스만 사용한다면 문제가 없지만 아래의 두 코드는 전혀 다른 결과가 나타날 수 있습니다.
<i className={ 'btn' + isActive ? ' active' : '' }>

<i className={ 'btn' + (isActive ? ' active' : '') }>

차이점의 괄호의 여부 이지만 괄호를 사용해 그룹으로 정하지 않으면 +가 추가된 부분에서 원하지 않는 부분 결합이 나타나게 되죠.

여기까지 React앱에서 클래스명을 선언하는 다양한 방법을 알아봤습니다 ~ !