React 앱을 개발하다 보면 조건에 따라 다른 컴포넌트를 렌더링해야 하는 경우가 많습니다. JSX에서 조건부 렌더링을 하는 방법을 살펴보겠습니다.

if 문 사용

일반적인 JavaScript의 if 문을 JSX에서 사용할 수는 없지만, 삼항 연산자를 사용하여 비슷한 방식으로 조건부 렌더링을 할 수 있습니다.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please sign up.</h1>
      )}
    </div>
  );
}

논리 && 연산자 사용

JSX에서 논리 연산자를 사용하여 조건부 렌더링을 할 수도 있습니다. 이를 통해 간단한 조건부 렌더링을 구현할 수 있습니다.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
    </div>
  );
}

조건부 렌더링 요약

JSX에서 조건부 렌더링을 위해 삼항 연산자나 논리 && 연산자를 사용할 수 있습니다. 이를 통해 조건에 따라 동적으로 컴포넌트를 렌더링할 수 있습니다.

조건부 렌더링은 React 애플리케이션에서 매우 유용하며, 다양한 상황에 따라 UI를 동적으로 제어할 수 있게 해줍니다.

이상으로 JSX에서의 조건부 렌더링에 대해 알아보았습니다!