[React] React 조건부 렌더링

React 조건부 렌더링 이란?

조건부 렌더링은, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다. 

React에서 원하는 동작을 수행하는 캡슐화된 별개의 컴포넌트를 생성할 수 있다. 또한 State에 의존하여

그 중 일부만 렌더링 시키는 것도 가능하다.

 

크게 3가지 방법으로 나눠 소개할 수 있다.

• if-else 조건문
• 논리 연산자 &&
• 조건부 연산자

1. if - else 조건문

사용자가 로그인 하는 여부에 따라서 <UserGreeting/> 또는 <GuestGreeting/> 컴포넌트를 표현하는 예시이다.

function Gretting(props) {
   const isLoggedIn = props.isLoggedIn;
   if (isLoggedIn) { // 로그인 상태라면 
      return <UserGreeting />;
   }
   
   return <GuestGreeting />;
}


ReactDOM.render(
// Try changing to isLoggedIn={true}
  <Greeting isLoggedIn={false} />
  document.getElementById("root")
)

if-else 패턴은 컴포넌트가 조건에 따라 렌더링할 내용을 전체가 결정되는게 특징이다. 이 패턴에서는 컴포넌트의 

일부분인 선택적으로 렌더링하기에 적합하지 않다.

 

예를 들어서 아래와 같이 if-else문을 적용하면 제대로 작동하지 않는다.

function Greeting(props) {
   const isLoggedIn = props.isLoggedIn;
   
   return (
     <React.Fragment>
       {
          // 'Unexpected token' error 발생
          if (isLoggedIn) {
            return <UserGreeting />;
          } else {
            return <GeustGreeting />;
          }
       }
     </React.Fragment>
   )
}

if-else 패턴을 사용하면서 일부분만 렌더링 하려면 즉시 실행 함수 (IIFE)를 사용해야 한다.

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;

    return (
        <React.Fragment>
        {
            // 즉시 실행 함수 IIFE
            (() => {
                    if (isLoggedIn) {
                        return <UserGreeting />;
                    }
                    else {
                        return <GeustGreeting />;
                    }
                }
            )();
        }
        </React.Fragment>
    );
}

즉시 실행 함수를 사용한 if-else 패턴은 가독성이 떨어지는 문제가 발생한다. 또한 if-else 패턴으로 렌더링 대상 전체가

변경되었다면, 새로운 컴포넌트를 작성하는게 더 적합하기 떄문에 if else 패턴은 효과적으로 활용하기 어려운 패턴이다.

 

2. 논리 연산자 &&

논리연산자 &&는 "두 피연산자가 true일때 결론적으로 true를 반환"이라고만 알고 있었다.

그런데 자바스크립트에서는 true && expression은 항상 expression으로 평가되고

false && expression은 항상 false로 평가되기 때문에 조건부 렌더링할때 유용하게 사용할 수 있다.

 

또한 중괄호 {}로 감싸면 JSX에 어떤 표현식이던 넣을 수 있었다. 자바스크립트의 논리연산자 &&도 포함이다.

function MyPage(props) {
   const unreadMessages = props.unreadMessages;
   return (
      <div>
        <h1>Hello kim!</h1>
        {unreadMessages.length > 0 && 
           <h2>
             You have {unreadMessages.length} unread messages;
           </h2>
       }
     </div>
   );
}

const messages = ['React', 'Re:React', 'Re:Re: React'];
ReactDOM.render(
  <MyPage unreadMessages={messages} />,
  document.getElementById('root');
)

위 코드는 unreadMessage.length > 0 일때 <h2/> 태그의 내용을 나타내는 예시이다.

 

3. 조건부 연산자 ( 삼항 연산자 )

자바스크립트 조건부 연산자인 condition ? true : false 를 사용하면 조건부 렌더링을 구현해줄 수 있다.

function WaringBanner(props) {
   if (!props.warn) {
      // wran == false 이면 
      return null;
   }
   
   return (
      <div className="warning"> Warning! </div>
   
   );
}

□ Props값 설정을 생략한다면 ?

컴포넌트 props 값을 설정하게 될때 만약 props 이름만 작성하고 값을 따로 설정안한다면, true로 간주된다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello name="Kim" color="red" isPerson />
      <Hello color="blue"/>
    </div>
  );
}

export default App;

이와 같이 isPerson만 props로 넘겨주었는데, 이는 isPerson = {true}와 동일한 의미라고 할 수 있다.

---

참고자료

https://velog.io/@yoonvelog/React-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EB%A0%8C%EB%8D%94%EB%A7%81

React 조건부 렌더링