React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
삼항 연산자
우리가 보통 분기처리를분기 처리를 할 때에는 if문을 사용해서 if와 else 이렇게 혹은 else if까지 사용하면서 분기 처리를 한다. 삼항 연산자는 if와 else 처리를 좀 더 간편하게 사용할 수 있게 해 준다. 삼항 연산자는 세 개의 피연산자를 가져 삼항 연산자라고 불린다.
만약 숫자가 양수인지 음수인지 판별하려는 코드를 if문으로 작성하면 아래와 같다.
let num = 4;
if(num >= 0) {
console.log("양수");
} else {
console.log("음수");
}위의 코드에서는 양수가 출력된다. 그럼 이 if와 else문으로 이루어진 코드를 삼항 연산자로 수정해보자.
let num = 4;
num >= 0 ? console.log("양수") : console.log("음수");이렇게 단 두 줄이면 num에 들어있는 숫자가 양수인지 음수인지 판별할 수 있다. 삼항 연산자는 먼저 true 혹은 false가 반환될 수 있는 조건을 작성한 후 '?' 물음표를 붙여준다. 크리고 참이면 실행할 명령 : 거짓이면 실행할 명령; 식으로 작성하면 된다.
그러면 여기서 'else if'는 안되나..? 싶을 수 있는데 당연히 된다.
let num = 0;
let str = num > 0 ? "양수" : num < 0 ? "음수" : "0";
console.log(str); // 0이 출력된다.약간 생김새에서 거부감이 들 수 있는데 천천히 뜯어보면 금방 이해할 수 있다. else if란 본디 if문에서의 조건이 '아닐' 경우에 if문과 다른 조건을 판별한다. 여기서도 똑같이 생각하면 된다. 일단 num이 0보다 큰지 판별하여 true면 "양수"를 str 변수에 저장하고 아닐 경우에 처음과 다른 조건을 넣어 한 번 더 num이 0보다 작은 지를 검사한다. 그 조건이 true면 음수를 저장하고, 아닐 경우에는 0을 저장한다.
삼항 연산자를 여러 번 사용할 경우 가독성이 매우 떨어지므로 이럴 때는 그냥 if-else if-else를 사용하는게 낫다.
