조건부 렌더링

1. If Else Statement : 특정 변수나 값을 활용해 조건에 넣어서 활용

const isAdult = getUserInfo()

if(isAdult){
  return <AdultComponent />
}
return <NormalComponent />

2. Ternary Operator : 삼항연산자를 활용해 JSX안에서 활용

const isAdult = getUserInfo()

return (
  <div>
   {isAdult? <AdultComponent /> : <NormalComponent />}
  </div>
)

3. && Operator(logical operator) : isAdult조건이 참일때만 뒤의 컴포넌트 반환
   조건이 거짓이라면 아무것도 반환하지 않음 (참인경우에만 결과 나타낼때 사용)

const isAdult = getUserInfo()

return (
  <div>
   {isAdult && <AdultComponent />}
  </div>
)

4. || Operator(logical or operator) : 변수에 담은 값이 있을땐 그대로 반환하고 아닐땐 || 뒤의 값을 반환한다

const postTitle = getPostTitle()

return (
  <div>
  	{postTitle || 'no title'}
  </div>
)

5. optional chaning