조건부 렌더링

JSX자체에 대한 문법은 아니지만 JSX문법을 return하면서 (즉, 렌더링하면서) 알아야하는 조건부 렌더링에 대해 살펴보도록 하겠습니다.

react공식문서

지난 시간에 JSX자체가 표현식이라는 것을 공부하며 아래와 같은 코드를 작성했습니다.

  const getGreetingMessage = (name) => {
    if(name === '0seo8')  return `Hello, ${name}! Learn React`
    return `Welcome, ${name}!`
  }

  return (
    <a href="https://reactjs.org">{getGreetingMessage("0soe")}</a>
  )

위 코드를 아래와 같이 변경하면 과연 정상적으로 동작을 할까요?

return (
  <a href="https://reactjs.org">{
      if(name==="0soe") return `Hello, ${name}! Learn React`
      return `Welcome, ${name}! Learn React`
  }
  </a>
)

if문은 자바스크립트로 사용을 하는 것뿐이지 자바스크립트의 표현식 자체는 아니기 때문에 위와 같이 return 문 내에 {}를 이용해 사용을 할수는 없습니다.(for문 역시 마찬가지입니다)

그렇다면 조건에 따라 다르게 렌더링을 하고 싶은 경우에는 항상 함수로 분리를 해야하는걸까요?

정답은 그렇지 않습니다.입니다

return()문 내에세 if-else구문을 삼항연산자를 이용해 표현할 수 있기 떄문입니다. 이는 삼항연산자로 작성된 {}내가 모두 표현식이 될 수 있기 때문입니다.(내부에서 분기를 치는 방식으로 진행할 수도 있습니다.)

return (
<a href="https://reactjs.org">{
      name==="0soe" 
        ? 
        `Hello, ${name}! Learn React`
        :
        `Welcome, ${name}! Learn React`
      }
  </a>
)

또한 if구문의 경우 논리연산자로 표현하는 것이 일반적입니다.

return (
  <a href="https://reactjs.org">{
      name === "0soe8"
      &&
        `Hello, ${name}! Learn React`
      }
  </a>
)

즉, 아래와 같이

{name === "0soe" ? `Hello, ${name}! Learn React`: null}

표현을 하는 것보다는 다음과 같이 표현하는 것을 권장하니다

{name === "0soe" && `Hello, ${name}! Learn React`}

주의사항

JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가됩니다.
따라서 && 뒤의 엘리먼트는 조건이 true일때 출력이 됩니다. 조건이 false라면 React는 무시하고 건너뜁니다.
falsy 표현식(ex: 0, '')을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만 falsy 표현식이 반환된다는 것에 주의해주세요. 아래 예시에서,

0

이 render 메서드에서 반환됩니다.

render() {
  const count = 0; //falsy한 값
  return (
    <div>
      { count && <h1>Messages: {count}</h1>} //렌더링이 안될거라 예상할 수 있지만 실제로는 0만 찍힙니다.
    </div>
  );
}

만약, 화면에 보여주고 싶지 않다면 느낌표를 두번 넣어 표현식을 true혹은 false로 명확하게 만들어주면 됩니다.

<div>{!!count && <h1>Messages: {count}</h1>}</div>