먼저 Conditional Rendering의 의미부터 이해를 해야겠죠. 먼저 Condition이라고 하면 조건, 상태라는 의미를 갖고 있습니다. 평소에 우리가 '오늘 컨디션이 좋다/나쁘다'라고 표현을 할 때 컨디션의 뜻은 상태라는 의미를 갖고 있습니다. 하지만 컴퓨터 프로그래밍에서의 컨디션은 조건을 의미합니다. 그래서 Conditional Rendering은 조건에 따른 렌더링이라고 해석할 수 있고, 조건부 렌더링이라고 줄여서 부릅니다.

조건부 렌더링이라고 하면 어떠한 조건에 따라서 렌더링이 달라지는 것을 의미합니다. 여기에서 조건은 우리가 프로그래밍에서 사용하는 조건문이라고 이해하면 됩니다. 조건문의 결과는 true 아니면 false가 나오는데, 이 결과에 따라서 렌더링을 다르게 하는 것을 조건부 렌더링이라고 정의할 수 있습니다. 예를 들어, 조건문의 값이 true이면 버튼을 보여주고, false이면 버튼을 가리는 것도 하나의 조건부 렌더링이라고 할 수 있겠죠. 아래 예제 코드를 보도록 하겠습니다.

function UserGreeting(props) {
    return <h1>다시 오셨군요!</h1>;
}

function GuestGreeting(props) {
    return <h1>회원가입을 해주세요.</h1>;
}

위 코드에는 UserGreeting과 GuestGreeting이라는 두 개의 함수 컴포넌트가 있습니다. UserGreeting 컴포넌트는 이미 회원인 사용자에게 보여줄 메시지를 출력하는 컴포넌트이고, GuestGreeting 컴포넌트는 아직 가입하지 않은 게스트 사용자에게 보여줄 메시지를 출력하는 컴포넌트입니다. 이제 회원인지 아닌지 여부에 따라서 이 두 개의 컴포넌트를 선택적으로 보여줘야겠죠. 아래 코드에서는 조건부 렌더링을 사용하여 이를 구현하고 있습니다.

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <UserGreeting />;
    }
    return <GuestGreeting />;
}

위 코드에 나오는 Greeting 컴포넌트는 isLoggedIn이라는 변수의 값이 true에 해당되는 값(Truthy)이면 UserGreeting컴포넌트를 리턴하고, 그렇지 않으면 GuestGreeting 컴포넌트를 리턴하는 컴포넌트입니다. props로 들어오는 isLoggedIn의 값에 따라서 화면에 출력되는 결과가 달라지게 됩니다. 이처럼 조건에 따라서 렌더링의 결과가 달라지도록 하는 것을 조건부 렌더링이라고 이해하면 됩니다.

NOTE. 자바스크립트의 Truthy와 Falsy
보통의 프로그래밍 언어에서는 참, 거짓을 구분하기 위해서 boolean형태의 자료형이 존재하고, 그 값은 true와 false 둘 중에 하나가 됩니다. 그리고 boolean과 자료형이 다른 값을 비교하게 되면 오류가 나게 됩니다. 하지만 자바스크립트에서는 true는 아니지만 true로 여겨지는 값들이 존재하는데, 이것을 truthy라고 부릅니다. 마찬가지로 false는 아니지만 false로 여겨지는 값들은 falsy라고 부릅니다. 자바스크립트의 truthy와 falsy가 수많은 개발자들을 혼란속에 빠트리기도 하는데, 잘 이해하고 있으면 유용하게 사용할 수 있습니다. 아래는 자바스크립트의 대표적인 truthy와 falsy값을 나타낸 것입니다. 실제로 조건문에서 사용할 때 헷갈리지 않도록 잘 기억해두기 바랍니다.

• truthy
  • true
  • {} (empty object)
  • [] (empty array)
  • 42 (number, not zero)
  • "0", "false" (string, not empty)
• falsy
  • false
  • 0, -0 (zero, minus zero)
  • 0n (BigInt zero)
  • '', "", `` (empty string)
  • null
  • undefined
  • NaN (not a number)