(React) 배열 렌더링

Dragon·2024년 2월 13일

위클리 페이퍼

목록 보기

12/18

배열 렌더링

const data = [
    {
      id: 1,
      username: 'user1',
      email: 'user1@gmail.com'
    },
    {
      id: 2,
      username: 'user2',
      email: 'user2@gmail.com'
    },
    {
      id: 3,
      username: 'user3',
      email: 'user3@gmail.com'
    },
  ...
 ]

위와 같은 배열 형식의 데이터를 서버로부터 받아왔고, 각 요소를 렌더링해야 한다고 해보자.

만약 데이터의 양이 엄청나게 많다면, 하나하나를 렌더링하는 코드를 짜려면 엄청난 양의 코드를 작성해야한다.

하지만 데이터들이 동일한 구조를 가진다는 것을 이용해, map 메서드를 사용하면 하나의 요소만 구현하는 코드만으로 전체를 구현하는 코드를 작성하는 것이 가능하다.

또, filter 메서드나 sort 메서드를 이용하면 요소들을 편집하거나 정렬하는 것이 가능하다.

map 메서드 를 통해 배열 렌더링하기

const UserList = () => {
  const [data, setData] = useState(initialData);
  
  return (
      <ul>
        {data.map(user => (
          <li key={user.id}>
            <div>ID: {user.id}</div>
            <div>Username: {user.username}</div>
            <div>Email: {user.email}</div>
          </li>
        ))}
      </ul>
  );
};

map 메서드는 'data' 의 각 요소를 순회하면서, 콜백함수의 리턴값에 해당하는 요소를 반환한다.
map 메서드가 data 를 순회하면서 각 요소에 따른 li 태그를 반환하기 때문에, UserList 컴포넌트는 결국 전체 data 요소를 담은 리스트를 반환한다.

filter 메서드를 통해 요소 삭제하기

const UserList = () => {
  const [data, setData] = useState(initialData);

  const handleDelete = (id) => {
    // Button 을 누른 데이터의 id 에 해당하는 요소를 제외한 새로운 배열 생성
    const newData = data.filter(item => item.id !== id);
    // 새로운 배열을 기존의 data 에 덮어 씌운다.
    setData(newData);
  };

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {data.map(user => (
          <li key={user.id}>
            <div>ID: {user.id}</div>
            <div>Username: {user.username}</div>
            <div>Email: {user.email}</div>
            // 삭제를 실행하기 위한 button 태그
            <button onClick={() => handleDelete(user.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

filter 메서드는 data 를 순회하며, 조건(콜백함수의 리턴값) 에 맞는 요소들만을 추출한 배열을 반환한다.
Delete button 의 onClick 이벤트 핸들러로 바인딩된 'handleDelete' 함수는 해당 버튼을 가진 요소의 key(id) 값을 인수로 받는다.
버튼이 눌리면 함수 내에서 filter 메서드를 통해 '해당 key 값에 해당하지 않는 요소들' 만을 추출한 배열을 data state 에 저장하고, UserList 컴포넌트가 재렌더링이 이루어지면서 바뀐 data 에 해당하는 리스트가 다시 렌더링된다.
결과적으로는 해당 버튼을 가진 요소의 데이터만을 삭제한 배열이 렌더링된다.
filter 의 조건을 컨트롤하여 이와 같이 요소를 삭제하거나, 요소를 추가하는 '편집' 이 가능하다.

sort 메서드를 통해 배열 정렬하기

const UserList = () => {
  const [data, setData] = useState(initialData);

  const handleSort = () => {
    // 
    const sortedData = data.sort((a, b) => b.id - a.id);
    setData(sortedData);
  };

  return (
    <div>
      <h2>User List</h2>
      // 정렬을 실행하기 위한 button 태그
      <button onClick={handleSort}>Sort Descending</button>
      <ul>
        {data.map(user => (
          <li key={user.id}>
            <div>ID: {user.id}</div>
            <div>Username: {user.username}</div>
            <div>Email: {user.email}</div>
          </li>
        ))}
      </ul>
    </div>
  );
};

sort 메서드는 data 를 순회하며, 두 개의 요소를 조건에 따라 비교하며 정렬을 진행하고, 정렬된 배열을 반환한다.
위의 경우, (콜백함수의 리턴값이 0 또는 음수인 경우 a, b / 리턴값이 양수인 경우 b, a) 로 정렬이 이루어진다.
Sort Descending button 을 누르면 핸들러로 바인딩된 handleSort 함수 내의 sort 메서드는 기존 data 를 역순으로 정렬한 배열을 반환한다.
setData 를 통해 정렬된 배열이 data state 에 저장되면, UserList 컴포넌트가 리렌더링 되면서 바뀐 data 에 해당하는 배열이 렌더링된다.

key prop 가 필요한 이유

// 각 요소마다 유니크한 key prop 을 지정해주어야 한다.
<li key={user.id}>
  <div>ID: {user.id}</div>
  <div>Username: {user.username}</div>
  <div>Email: {user.email}</div>
</li>