if else

아래 예시는 로그인 작동과 관련된 간단한 예시이다.

여기서 로그인 되었을경우, 되지 않았을 경우 다른 component를 렌더링 하도록 if else 문을 활용했다.

import React from 'react'

function UserGreeting(props) {
  return (
    <h1>
      {props.name}, Welcome It is {props.count} Times
    </h1>
  )
}

function GuestGreeting(props) {
  return <h1>Please Sign up.</h1>
}

function Greeting(props) {
  if (props.isLoggedIn) {
    return <UserGreeting name="Chul" count={0} />
  }

  return <GuestGreeting />
}

export default function Condition() {
  const isLoggedIn = true
  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
    </div>
  )
}

삼항 연산자

condition ? true : false 를 활용하여 if else를 대체할 수 있다.

function Greeting(props) {
  return props.isLoggedIn ? (
    <UserGreeting name="Chul" count={0} />
  ) : (
    <GuestGreeting />
  )
}

&& 논리연산자

true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가됩니다.

props의 name이 있을 경우 name과 ,가 표시되도록 할 수 있으며,

props의 count가 있을 경우 It is props.count Times가 출력되도록 할 수 있다.

function UserGreeting(props) {
  return (
    <h1>
      {props.name && props.name + ','} Welcome{' '}
      {props.count && `It is ${props.count} Times`}
    </h1>
  )
}

여기서 주의할 점.

0은 falsy한 값으로 false를 반환하지 못해 0일경우 아래와 같이 0이 표시된다.

Boolean으로 false를 반환하게 하여 해결할 수 있다.

function UserGreeting(props) {
  return (
    <h1>
      {props.name && props.name + ','} Welcome{' '}
      {Boolean(props.count) && `It is ${props.count} Times`}
    </h1>
  )
}