[typescript] JSX에서 조건부 렌더링 작성하는 방법

18 Dec 2023

typescript

JSX에서 조건부 렌더링을 작성하는 방법은 여러 가지가 있습니다. 아래는 TypeScript를 사용하여 JSX에서 각 방법을 구현하는 방법에 대한 예제입니다.

1. 조건부 연산자(Conditional Operator)를 이용한 방법

const App = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
  return (
    <div>
      {isLoggedIn ? <p>Welcome user!</p> : <p>Please log in</p>}
    </div>
  );
};

2. 논리 연산자(Logical && Operator)를 이용한 방법

const App = ({ items }: { items: string[] }) => {
  return (
    <div>
      {items.length > 0 && (
        <ul>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

3. 삼항 연산자를 이용한 방법

const App = ({ isLoading }: { isLoading: boolean }) => {
  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <button>Submit</button>
      )}
    </div>
  );
};

참고 자료

위의 예제는 TypeScript와 JSX를 기반으로 하며, React 애플리케이션에서도 동일하게 적용될 수 있습니다. 코드를 사용하여 각각의 방법을 실제로 시도해보고, 프로젝트에 맞는 가장 적합한 방법을 선택하여 사용해보세요.