React 삼항연산자로 Style 정보 입력

 

React 삼항연산자로 Style 정보 입력

React에서 UI를 그릴 때 삼항연산자를 많이 사용하게 된다. A 조건이면 배경을 빨간색으로하고 아니면 투명한 색으로 한다던가 Border 값을 조건에 따라서 넣는다거나 하는 경우가 많다.  그리고 html 코드 부분에 조건문 등을 허용하지 않아서 삼항연산자를 써야 하는 경우도 있다.

 

 

 

---

 

삼항연산자로 Style 넣는 예제

borderBottom:category.toLowerCase().indexOf('평균'.toLowerCase()) !== -1  
? '2px solid #aaa' // category 값이 "평균" 이라는 단어를 포함할 경우
: '1px solid #ddd' // category 값이 "평균" 이라는 단어를 포함하지 않을 경우

삼항연산자는 3개의 항을 사용해서 삼항이라고 부른다. 첫번째 항은 조건, 두번째는 조건이 TRUE일 경우, 세번째는 조건이 FALSE일 경우에 RETURN 되는 값을 입력하면 된다.

 

name === "홍길동" ? "홍길동이 맞습니다." : "홍길동이 아니에요";

 

만약 name="홍길동" 이라면 "홍길동이 맞습니다"가 리턴되고 아니면 "홍길동이 아니에요"가 리턴된다. 삼항연산자는 style 조건을 넣을 때가 아니어도 정말 많은 경우에 사용하게 되니 잘 알아두도록 하자.