값, 식, 문

• 값과 식과 문을 구별하는 것은 중요
• () : 함수, 우선순위
• {}: 값과 식
• 바로 반환하는 분기문은 논리 연산자 활용

삼항 연산자

• 3개의 피 연산자를 취해서 조건 ? 참(식) : 거짓(식) 판별
• 값을 수렴되는 식 ⇒ 객체에 값으로 사용 가능 (JSX)
• 객체에 값으로 사용 불가능 if문은 사용 불가능 ⇒ 문법적 에러

<div id={if(condition) {"msg"}}> Hellow World!</div> // 사용불가

<div id={condition ? "msg" : null }> Hellow World!</div>

• 삼항 연산자를 사용할 때는 일관성 유지가 중요
• 삼항 연산자를 과도하게 중첩해서 사용하지 않는 것이 좋다.
  • switch case문을 활용하기
• 조건이 여러 개 일 경우 가독성을 생각해서 작성
• 반환 값이 없는 함수의 경우 삼항 연산자를 사용하지 않기

논리 연산자

• 논리연산자를 사용해서 분기문 없이 값 반환

// IIFE 이용하여 값 반환
function ReactCompoent() {
	return(
		{()=>{
			if(caseOne) return <div>One</div>
			if(caseTwo) return <div>Two</div>
			return <div>Three</div>
		}()}
  )
}

// 논리연산자를 이용하여 값 반환
function ReactCompoent() {
	{caseOne && !caseTwo && <div>One</div>}
	{!caseOne && caseTwo && <div>Two</div>}
	{!caseOne && !caseTwo && <div>Three</div>}
}