삼항 연산자로 else if 만들기

음악 데이터테이블이 있고 컬럼 중에 장르가 있다고 가정한다.

 

각 장르는 숫자로 구분한다.

 

 

0 = 롹

 

1 = 힙합

 

2 = 발라드

 

3 = 트로트

음악(music)
노래	가수	장르
좋은 날	아이유	1 (힙합)
Rocking tonight	메탈리카	2 (발라드)
불타오르네	방탄소년단	3 (트로트)
뚜두뚜두	블랙핑크	0 (롹)
우주를 줄게	볼빨간 사춘기	1
그건 아마 우리의 잘못은 아닐거야	백예린	2
좋니	윤종신	2
킬리만자로의 표범	조용필	3

 

 

 

서버에서 music이라는 이름으로 뷰단에 데이터가 넘어온다고 가정해보자

 

서버에서 뷰로 데이터를 뿌릴 때 서버사이드 렌더링이라면 표현언어를 사용하여 if문 속에 태그 내용을 써서 조건을 줄 수 있지만

 

 

 

타임리프

<th:if="${music.genre == 0}">
	<div>롹</div>
</th:if>

<th:if="${music.genre == 1}">
	<div>힙합</div>
</th:if>

<th:if="${music.genre == 2}">
	<div>발라드</div>
</th:if>

<th:if="${music.genre == 3}">
	<div>트로트</div>
</th:if>

 

 

 

 

JSTL


<c:choose>
    <c:when test="${music.genre == 0}">
		롹
    </c:when>



    <c:when test="${music.genre == 1}">
        힙합
    </c:when>
    
    <c:when test="${music.genre == 2}">
        발라드
    </c:when>
    

    <c:otherwise>
        트로트
    </c:otherwise>


</c:choose>

태그별로 감싸서 if 조건문을 써야해서 생산성이 떨어질 수 있다.

 

 

이미 페이지가 렌더 된 상태에서 AJAX 등을 이용하여 동적으로 데이터를 불러올 때에는 

 

innerHTML 등으로 태그로 이루어진 문자열 안에 조건문을 넣지 못해 애매할 때가 있다.

 

 

                var text =`
                <choose>
                <div>${music.genre}</div>
                </choose>`
                
                
                
                
                var text =`
                <div th:if=${music.genre}>
                
                </div>`
                
                //이미 렌더를 끝낸 페이지에서 동적으로 
                //문자열 안에 if문이 들어가면 그대로 문자열로 인식하거나 작동하지 않을 때가 많다

 

 

 

 

백단에서 처리하고 보내려니 처리 시간 낭비인 것 같고 코드가 더러워진다.

 

 

 

이때 ${삼항 연산자}를 사용하면 if else는 물론 else if 까지 대체 할 수 있다.

 

 

 

 

if else 를 이용한다면

<th:if="${music.genre == 0}">
	<div>롹</div>
</th:if>

<th:if="${music.genre == 1}">
	<div>힙합</div>
</th:if>

<th:if="${music.genre == 2}">
	<div>발라드</div>
</th:if>

<th:if="${music.genre == 3}">
	<div>트로트</div>
</th:if>

요런 느낌이지만

 

삼항 연산자를 사용하면

 

 

<div th:if="${genre == 0 ? '롹' :
			genre == 1 ? '힙합' :
			genre == 2 ? '발라드' :
			genre == 3 ? '트로트' :
				null}">
	
</div>

 

 

 

 

동적으로 생성될 데이터 사용시는

 

 

 

    $.ajax({
                type : "POST",            
                url : "/music/ismylife",      
                data : params,           
                success : function(music){
                var text =`
                <div>
                ${music.genre == 0 ? "롹" :
			music.genre == 1 ? "힙합" :
			music.genre == 2 ? "발라드" :
			music.genre == 3 ? "트로트" :
				null}
                </div>
                }
            });

 

 

하나의 태그 안에서 삼항연산자로 조건을 주면 깔끔하다.

 

 

늘 삼항 연산자는        조건? 참: 거짓

 

참거짓만 반영하는 줄 알았는데        조건?조건?참:거짓 :else

 

즉!!

 

삼항연산자에 참이 들어갈 곳에 계속 조건을 넣어주면 else if가 된다!