삼항 연산자를 사용한 조건부 렌더링 및 동적 리스트 생성

React에서 삼항 연산자를 사용한 조건부 렌더링과 동적 리스트 생성은 자주 사용되는 패턴 중 하나입니다. 아래 예제를 통해 두 가지에 대해 알아보겠습니다.

1. 삼항 연산자를 사용한 조건부 렌더링:

import React, { useState } from 'react';

const MyComponent = () => {
  const [isLoggedIn, setLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome, User!</p>
      ) : (
        <button onClick={() => setLoggedIn(true)}>Log In</button>
      )}
    </div>
  );
};

export default MyComponent;

이 예제에서는 isLoggedIn 상태에 따라 환영 메시지 또는 로그인 버튼을 렌더링합니다.

2. 동적 리스트 생성:

import React, { useState } from 'react';

const MyComponent = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

이 예제에서는 map 함수를 사용하여 배열의 각 요소에 대해 동적으로 리스트 아이템을 생성합니다. key 속성을 사용하여 React가 각 항목을 고유하게 식별할 수 있도록 해야 합니다.

이러한 패턴을 사용하면 조건부 렌더링과 동적 리스트 생성을 효과적으로 다룰 수 있습니다.