React에서 어떻게 조건부 렌더링(Conditional Rendering)을 할 수 있나요?

React에서 조건부 렌더링을 수행하기 위해 다양한 방법을 사용할 수 있습니다.

1. 조건문(if/else): JavaScript의 일반적인 조건문을 사용하여 조건부 렌더링을 수행할 수 있습니다. 조건을 평가하고 JSX 코드에서 조건에 따라 다른 컴포넌트나 엘리먼트를 반환합니다. 예를 들어:

function MyComponent({ isLoggedIn }) {
  if (isLoggedIn) {
    return <UserDashboard />;
  } else {
    return <LoginForm />;
  }
}

2. 삼항 연산자(Ternary operator): JavaScript의 삼항 연산자를 사용하여 조건부 렌더링을 간단하게 처리할 수 있습니다. 삼항 연산자를 사용하여 조건을 평가하고 true/false에 따라 다른 컴포넌트나 엘리먼트를 반환합니다. 예를 들어:

function MyComponent({ isLoggedIn }) {
  return isLoggedIn ? <UserDashboard /> : <LoginForm />;
}

3. 논리 연산자(Logic operator): JavaScript의 논리 연산자를 활용하여 조건부 렌더링을 수행할 수 있습니다. && 연산자를 사용하여 조건을 평가하고 true일 때만 해당 컴포넌트나 엘리먼트를 반환합니다. 예를 들어:

function MyComponent({ isLoading }) {
  return (
    <div>
      {isLoading && <LoadingSpinner />}
      {!isLoading && <Content />}
    </div>
  );
}