[React] return 내에서 if문이 아닌 삼항연산자를 사용하는 이유

 

 

코드를 공부하다가
간단하게 나타낼 수 있는 조건의 경우
주로 삼항연산자를 사용하는 걸 알게됐다.
왜 if문이 아닌 삼항연산자를 사용하는걸까?

 

 

 

 

1. 삼항연산자

return ( 
	<div> 
		{isLogin ? <span>환영합니다!</span> : <span>로그인하세요.</span>} 
	</div>
 );

isLogin이 true이면 "환영합니다"가 보이고, false이면 "로그인하세요."가 보이도록 하는 것. 이런 방식으로 쓰는 걸 삼항연산자라고 한다. 코드를 찾아보면 return에 삼항연산자가 쓰인다. if문은 return 내에서 보지 못했다. 주로 익숙한 것은 if문이라서  굳이 왜 삼항연산자를 쓰는걸까? 의문이 생겼다.

 

 

 

---

 

 

 

2. 이유

- if문 -

const CustomerTable = () => { 
	let message; 
		if (isLogin) {
			 message = <span>환영합니다!</span>; 
		} else {
			 message = <span>로그인하세요.</span>; 
		}

        
		return <div>{message}</div>;
};

if문은 문장으로 로직을 수행하는 명령어 덩어리이다. 그저 동작을 수행할 뿐, 그 자체로 값이 되진 않는다. React에서 return은 값을 받아서 화면에 그리는 역할을 한다. 그런데 거기에 if문이 들어가면 갑자기 조건을 따져야하는 상황이 와서 컴파일러가 제대로 일을 할 수 없게 된다.

내가 이해한게 맞는지 잘 모르겠지만 좀 더 쉽게 설명해보겠다. 컴파일러는 return 존에 가니까 값만 처리할 도구를 가져왔다. 그런데 갑자기 조건문이 나타나 버린 것이다. 컴파일러는 조건문을 처리할 도구가 없어서 결국 처리하지 못하고 문법 에러를 발생시킨다. 

if문을 return 안에서만 사용을 못할 뿐이지, 아예 React내에서 사용불가능은 아니다. 위의 코드처럼 if문을 return 밖에 빼서 코드를 작성하면 된다.