Conditional Rendering

Conditional Rendering은 특정 조건에 따라 다른 결과물을 렌더링

JavaScript에서는 if, switch등의 조건부 연산자를 통해 조건에 맞는 각각의 행동을 수행했다.

React에서도 특정 조건을 만족할 때 원하는 동작을 수행하는 컴포넌트를 생성할 수 있으며 이를 조건부 랜더링(Conditional Rendering)이다고 한다.

React의 조건부 렌더링은 기본적으로 JavaScript의 조건부 연산자와 동일하게 동작한다.

아래 코드는 props로 전달받은 isLoggedIn을 통해 조건부 랜더링을 수행한다.

function LoginUser(props) {
  return <h1>로그인 되었습니다.</h1>;
}

function LogoutUser(props) {
  return <h1>로그아웃 되었습니다.</h1>;
}

function UserLogin(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <LoginUser />;
  }
  return <LogoutUser />;
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<UserLogin isLoggedIn={true} />);
// root.render(<UserLogin isLoggedIn={false} />);

Logical & Ternary Operator

위의 예제는 if를 사용하여 조건부 렌더링을 수행했다.

이 방법도 좋은 방법이지만 render() 함수안에서 사용하지 못한다는 단점이 있다.

그래서 React에서는 위의 단점을 해결하고 간결한 코드를 위해 대부분 여러 조건을 JSX에서 인라인(inline)으로 처리한다.

대표적인 방법은 다음과 같다.

Logical Operator

JSX 안에는 중괄호를 이용하여 표현식을 사용할 수 있다.

이 때 JavaScript의 논리 연산자(|| (OR), && (AND)) 단축평가를 사용하면 간결하여 조건부 랜더링을 수행할 수 있다.

A && B => A가 TRUE이면 B를 출력
A || B => A가 FALSE이면 B를 출력

function UserLogin(props) {
  return (
    <div>
      {
        props.isLoggedin && <h1>로그인 되었습니다.</h1>
      }
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<UserLogin isLoggedin={true} />);

Ternary Operator

엘리먼트를 조건부 렌더링하는 다른 방법은 JavaScript의 삼항 연산자를 사용하는 것이다.

논리 연산자와 마찬가지로 삼항 연산자를 사용하면 render() 함수에서 사용은 물론 코드의 간결성이 높아진다.

condition ? true : false

function UserLogin(props) {
  return (
    <div>
      {
        props.isLoggedin ? <h1>로그인 되었습니다.</h1> : <h1>로그아웃 되었습니다.</h1>
      }
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<UserLogin isLoggedin={false} />);

또한 삼항 연산자는 논리 연산자보다 조금 더 복잡한 표현식을 사용할 수 있다는 장점이 있다.

다만 가독성 측면에서는 떨어지기 때문에 상황에 맞는 방법을 선택하는 것이 좋다.

function UserLogin(props) {
  return (
    <div>
      {
        props.isLoggedin 
        ? <LogoutProfile logoutInfo={props} />
        : <LoginProfile loginInfo={props} />
      }
    </div>
  );
}

참고 자료

React 공식문서
웹 게임을 만들며 배우는 React - 제로초