[React] 삼항 연산자 (if 한 줄로 쓰기)

  안녕하세요. 이번엔 특히 react에서 자주 쓰이는 표현인 삼항 연산자를 보겠습니다.

 

 차례

 0. if

 1. 삼항 연산자

 

 0. if

 먼저 if를 보면,

if({조건}){
	실행할 거
}else if({조건}){
	실행할 거
}else{
	실행할 거
}

 

 if가 제일 먼저 나오고, else if는 if에서 해당되지 않는 부분에서 다시 조건을 봅니다. 그러다 최종 나머지는 else에서 실행됩니다.

 react 주의해야 할 점은, vanilla javascript에서는 else if없이 if만 써도 되고, else를 생략해도 되지만, react에선 if 다음 조건문은 else if가 와야하고, 여러 조건을 사용한 경우 마지막에 else가 생략되면 오류를 뿜습니다.

 

 1. 삼항 연산자

 react에서, 특히 return 안에 {}로 javascript를 넣는 경우가 많은데, 조건문은 자연스럽게 줄이 많아지기 때문에, 조건문을 한 줄로 쓸 수 있게 하는 방법이 있습니다.

 

{조건} ? {참일 때 실행} : {거짓일 때 실행}

 

 즉, ?로 물어보고 맞으면 앞의 답을 하고, 틀리면 뒤의 답을 합니다.

 실행하는 부분에 다시 괄호로 다음 조건을 더 넣을 수 있습니다.

 

 만약 실행할 게 없다면 null을 넣어 생략시킬 수 있습니다.

 

{조건} ? {실행} : null

 

 

 감사합니당.