조건부 렌더링과 리스트 렌더링: 조건에 따라 다른 컴포넌트를 보여주는 방법과 배열 데이터를 리스트로 변환하는 방법

조건부 렌더링

조건부 렌더링은 특정 조건에 따라서 다른 컴포넌트를 화면에 표시하는 방법입니다. JavaScript와 React에서는 다양한 방법으로 조건부 렌더링을 구현할 수 있습니다. 여기서는 주로 if문, 삼항 연산자, 그리고 논리 연산자를 사용한 예제를 다루겠습니다.

if 문을 사용하는 조건부 렌더링

if 문을 사용하면 특정 조건이 참일 때만 컴포넌트를 렌더링할 수 있습니다. 예를 들어, 사용자가 로그인 되어 있는지 아닌지에 따라 다른 컴포넌트를 표시할 수 있습니다.

jsx
function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

삼항 연산자를 사용하는 조건부 렌더링

삼항 연산자를 사용하면 더 간결하게 조건부 렌더링을 구현할 수 있습니다. 삼항 연산자의 기본 형식은 condition ? expr1 : expr2입니다.

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

논리 연산자를 사용하는 조건부 렌더링

때로는 조건이 참일 때만 렌더링하고, 거짓일 때는 아무것도 렌더링하지 않는 경우가 있습니다. 이 경우 논리 AND 연산자(&&)를 사용할 수 있습니다.

jsx
function Mailbox({ unreadMessages }) {
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      )}
    </div>
  );
}

리스트 렌더링

리스트 렌더링은 배열 데이터를 기반으로 React 컴포넌트를 반복적으로 렌더링하는 방법입니다. React에서는 배열의 각 요소를 map 함수로 반복 처리하여 각 요소를 컴포넌트로 변환할 수 있습니다.

기본적인 리스트 렌더링

여기서 우리는 배열을 사용하여 이름 목록을 렌더링하는 간단한 예제를 살펴보겠습니다.

jsx
function NameList({ names }) {
  const listItems = names.map((name) => <li key={name}>{name}</li>);
  return <ul>{listItems}</ul>;
}

위 코드에서 key 속성은 각 리스트 아이템에 고유한 식별자를 부여하기 위해 사용됩니다. 이것은 React가 어떤 항목이 변경되었는지를 효율적으로 결정을 돕습니다.

키(key)를 사용한 리스트 렌더링

키는 리스트의 각 요소에 무조건 고유해야 합니다. 다음은 객체 배열을 사용한 리스트 렌더링의 예입니다.

jsx
const todos = [
  { id: 1, text: 'Learn JavaScript' },
  { id: 2, text: 'Learn React' },
  { id: 3, text: 'Build a React App' },
];

function TodoList() {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

리스트를 렌더링할 때 각 항목에 고유한 값을 가진 key를 지정해야 렌더링 효율이 높아집니다. id는 고유하기 때문에 좋은 key가 될 수 있습니다.

결합하여 사용하는 방법

조건부 렌더링과 리스트 렌더링은 종종 함께 사용됩니다. 예를 들어, 특정 조건이 참일 때만 리스트를 렌더링하거나, 리스트의 각 항목에 대해 조건부 렌더링을 적용할 수 있습니다.

아래는 체크박스를 선택한 경우에만 할 일 목록을 렌더링하는 예제입니다.

jsx
function App() {
  const [showTodos, setShowTodos] = React.useState(false);

  const todos = [
    { id: 1, text: 'Learn JavaScript' },
    { id: 2, text: 'Learn React' },
    { id: 3, text: 'Build a React App' },
  ];

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={showTodos}
          onChange={(e) => setShowTodos(e.target.checked)}
        />
        Show Todos
      </label>
      {showTodos && (
        <ul>
          {todos.map((todo) => (
            <li key={todo.id}>{todo.text}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

위 코드에서는 체크박스를 선택하면 할 일 목록이 렌더링되고, 선택을 해제하면 목록이 사라집니다. 이렇게 하면 조건부 렌더링과 리스트 렌더링을 결합하여 더 복잡한 UI를 효율적으로 관리할 수 있습니다.

결론

조건부 렌더링과 리스트 렌더링은 현대 JavaScript 프레임워크, 특히 React에서 매우 중요한 개념입니다. 이를 잘 활용하면 더 깔끔하고 유지 보수하기 쉬운 코드를 작성할 수 있습니다. 조건부 렌더링을 통해 유연한 UI를 생성하고, 리스트 렌더링을 통해 반복적인 UI 요소를 효과적으로 관리할 수 있습니다.