React 애플리케이션을 개발하다보면 UI를 렌더링할 때 특정 조건에 따라 다른 컴포넌트를 렌더링해야 하는 경우가 있습니다. JSX에서 조건부 렌더링을 하는 방법에 대해 알아보겠습니다.

if 문을 사용한 조건부 렌더링

JSX 내에서 조건부 렌더링은 JavaScript의 삼항 연산자나 조건문을 사용하여 처리할 수 있습니다.

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <LoggedInGreeting />;
  }
  return <LoggedOutGreeting />;
}

위의 예제에서 isLoggedIn이 true이면 LoggedInGreeting 컴포넌트가, false이면 LoggedOutGreeting 컴포넌트가 렌더링됩니다.

논리 && 연산자를 사용한 조건부 렌더링

또 다른 방법으로는 논리 AND 연산자를 사용하여 조건부 렌더링을 처리할 수 있습니다.

function Greeting({ isLoggedIn }) {
  return (
    isLoggedIn && <LoggedInGreeting />
  );
}

isLoggedIn이 true인 경우에만 <LoggedInGreeting /> 컴포넌트가 렌더링됩니다.

조건부 렌더링을 위한 null 또는 false 반환

조건이 맞지 않는 경우 컴포넌트를 렌더링하고 싶지 않은 경우에는 null 또는 false를 반환할 수 있습니다.

function Greeting({ isLoggedIn }) {
  if (!isLoggedIn) {
    return null;
  }
  return <LoggedInGreeting />;
}

정리

JSX에서는 JavaScript의 다양한 방식을 활용하여 조건부 렌더링을 처리할 수 있습니다. 삼항 연산자, 논리 AND 연산자, 그리고 null 또는 false를 반환하는 방식을 통해 조건에 따라 다른 컴포넌트를 렌더링하는 작업을 간단하게 처리할 수 있습니다.

조건부 렌더링을 효율적으로 활용하여 React 애플리케이션의 UI를 동적으로 제어할 수 있습니다.

참고 자료

• React 공식 문서 - 조건부 렌더링