좌충우돌 개발자의 길

[토이프로젝트] jsx에서 else if문 사용하는 방법 본문

PROJECTS/Simple Wallet : 심플한 가계부

[토이프로젝트] jsx에서 else if문 사용하는 방법

sustronaut 2022. 11. 15. 10:52

# 트러블 슈팅

jsx에서 if - else if - else 문을 적용할 수 있을까?

 

# 해결 과정

  • jsx에서 if문을 쓰려고 보니 if - else문은 지원하지 않았다. 
  • 보통, 삼항연산자로 사용한다! 그런데 else if를 써야하는 경우는 어떻게 해야하는지 몰라 구글링을 해봤다.
  • switch - case가 있었지만 음수와 양수를 판별해줘야하는 내 코드에서는 적합하지 않는 문법이었다.

 

# 해결 방안

다음과 같이 작성하면 else if문도 jsx에서 사용이 가능하다

return (
	{dDay(data) === 0 ? (
        <AlarmText>
          '{data.alarmContents}' 당일 입니다!
        </AlarmText>
        ) : dDay(data) > 0 ? (
          <AlarmText>
            '{data.alarmContents}'까지 {dDay(data)}일 남았습니다.
          </AlarmText>
        ): (
          <AlarmText>
            '{data.alarmContents}' 알림은 지난지 오래입니다.
          </AlarmText>
        )
      
)