리스트 렌더링 filter() & map()

filter()

함수는 배열에서 주어진 조건에 맞는 요소들만 추출하여 새로운 배열을 생성하는 함수

React에서 이 함수를 사용하여 리스트를 렌더링할 때, 특정 조건에 맞는 항목만 보여주고 싶을 때 유용하게 사용

 

• 기본 문법

const newArray = array.filter((element) => {
  // 조건을 반환하는 함수
  return 조건;
});

 

 

• 예시

const UserList = () => {
// users 배열
  const users = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 17 },
    { id: 3, name: 'Charlie', age: 22 },
    { id: 4, name: 'David', age: 16 },
  ];

// users중 18살 이상만 추출
  const filteredUsers = users.filter(user => user.age >= 18);

// 반환 결과
  return (
    <div>
      <h1>User List (18 and older)</h1>
      <ul>
        {filteredUsers.map(user => (
          <li key={user.id}>
            {user.name} (Age: {user.age})
          </li>
        ))}
      </ul>
    </div>
  );
};


// 하단 codepen.io 적용
// ReactDOM.render로 UserList 컴포넌트를 #root에 렌더링
ReactDOM.render(<UserList />, document.getElementById('root'));

객체는 각각 id라는 key값, 이름, 나이를 지니고 있다.

 

• 결과물

See the Pen Untitled by 유상현 (@ltfsrwdf-the-selector) on CodePen.

 

 

map()

React에서 배열을 순회하면서 각 요소를 변환하여 새로운 배열을 반환하는 함수

이를 이용하면 배열의 각 요소를 React 컴포넌트로 렌더링이 가능하다.

 

 

1. 배열을 map()을 사용해 순회
2. 각 요소를 JSX로 변환하여 반환
3. 각 JSX 요소에 고유한 key 속성을 지정 이 key는 React가 각 항목을 추적하여 변경 사항을 효율적으로 업데이트하는 데 필요

• 예시

const TodoList = () => {
  const todos = ["Learn React", "Build a project", "Practice daily"];

// key는 배열 전체
// todo는 배열 각각 총 3개
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
};


// ReactDOM.render로 UserList 컴포넌트를 #root에 렌더링
ReactDOM.render(<TodoList />, document.getElementById('root'));

 

 

• 결과물

See the Pen Untitled by 유상현 (@ltfsrwdf-the-selector) on CodePen.