React 리스트 렌더링 (List Rendering)

📜 리스트 렌더링 (List Rendering)

React에서 배열을 동적으로 화면에 출력하는 작업은 리스트 렌더링이라고 부릅니다. 이는 자주 사용되는 기능으로, 데이터를 화면에 나열하거나 반복적인 UI 요소를 만들 때 유용합니다.

🔍 기본 리스트 렌더링

리스트 렌더링을 할 때는 map() 메서드를 사용하여 배열을 순회하고, 각 항목을 JSX로 반환합니다.

import { useState } from 'react';

function ItemList() {
  const items = ['사과', '바나나', '체리'];

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

위 예제에서는 map() 메서드를 사용하여 배열 items의 각 항목을 <li> 엘리먼트로 감싸서 출력합니다. 여기서 중요한 점은 각 항목에 key 속성을 지정해야 한다는 것입니다. 이는 React가 렌더링 성능을 최적화하고, 항목들이 변경될 때 올바르게 추적할 수 있게 합니다.

📝 조건부 렌더링과 리스트 렌더링

리스트 렌더링을 하면서 조건부로 요소를 표시할 수 있습니다. 예를 들어, 배열이 비어있으면 메시지를 표시하는 등의 처리가 가능합니다.

function ItemList() {
  const items = [];

  return (
    <div>
      {items.length === 0 ? (
        <p>항목이 없습니다.</p>
      ) : (
        <ul>
          {items.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
}
  

💡 리스트 렌더링 팁

• key 속성: 각 항목에 고유한 key 값을 할당하여, React가 각 항목을 구별하고 효율적으로 업데이트할 수 있도록 합니다.
• 불변성 유지: 배열을 직접 수정하는 대신, 새 배열을 생성하고 상태를 업데이트하세요. 예: setItems([...items, newItem])
• 큰 리스트 처리: 큰 데이터를 렌더링할 때는 가상화 기법을 사용하여 성능을 최적화할 수 있습니다.

🎯 예제: 할 일 목록 만들기

이제 할 일 목록을 구현해 보겠습니다. 사용자가 할 일을 입력하고 추가할 수 있는 간단한 애플리케이션을 만들겠습니다.

import { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const addTodo = () => {
    if (input) {
      setTodos([...todos, input]);
      setInput('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={handleInputChange}
        placeholder="할 일을 입력하세요"
      />
      <button onClick={addTodo}>추가</button>

      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}
  

💡 요약

• map()을 사용하여 배열을 순회하고, JSX로 각 항목을 반환
• key 속성은 각 항목을 고유하게 구별하는 데 사용
• 조건부 렌더링을 활용하여 리스트의 상태에 따라 UI를 동적으로 변경 가능