React / map, filter로 반복 렌더링하기

 

map과 filter

 

map과 filter는 둘다 배열을 다룰 때 자주 사용하는 메서드다.

 

map() : 배열 내의 모든 요소 각각에 대해 주어진 콜백을 호출한 결과를 모아 새로운 배열을 반환

filter() : 배열의 각각의 요소에 대해 콜백을 호출한 결과, true를 반환하는 (조건을 만족하는) 모든 요소를 모아 새로운 배열을 반환

둘다 원본 배열은 변경하지 않는다.

 

예시로 일단 다음과 같이 트와이스의 멤버들의 정보가 담겨있는 배열을 하나 만들었다.

const twice = [
  { name: "나연", birth: 1995, country: "한국" },
  { name: "정연", birth: 1996, country: "한국" },
  { name: "모모", birth: 1996, country: "일본" },
  { name: "사나", birth: 1996, country: "일본" },
  { name: "지효", birth: 1997, country: "한국" },
  { name: "미나", birth: 1997, country: "일본" },
  { name: "다현", birth: 1998, country: "한국" },
  { name: "채영", birth: 1999, country: "한국" },
  { name: "쯔위", birth: 1999, country: "대만" },
];

 

1) 멤버들의 이름만 담겨있는 배열을 만들기

// 트와이스 멤버의 이름만 담겨있는 배열 만들기
// map 사용
// 화살표 함수는 중괄호를 생략하면 바로 return한다는 뜻이므로 return 키워드도 생략한다.
// twice.map((member)=>{return twice.name})
console.log(twice.map((member) => member.name));

 

2) 멤버들의 이름에 '씨'가 붙여진 상태로 이름이 담겨있는 배열을 만들기

// 멤버들 이름 뒤에 '씨' 붙인 배열 만들기
// map 사용
console.log(twice.map((member) => member.name + "씨"));

 

3) 1997년 이후에 태어난 멤버만 남긴 배열 만들기

// birth가 1997년 포함 그 뒤인 멤버만 남긴 배열 만들기
// filter 사용
console.log(twice.filter((member) => member.birth >= 1997));

 

4) 국적이 한국이 아닌 멤버만 남긴 배열 만들기

// 국적이 한국이 아닌 멤버만 남긴 배열 만들기
// filter 사용
console.log(twice.filter((member) => member.country !== "한국"));

 

5) 2000년 이후에 태어나고 국적이 일본인 멤버의 이름만 남긴 배열 만들기

먼저 filter()로 조건에 맞는 요소를 출력하고, map()으로 멤버의 이름만 반환시키면 된다.

// birth가 1997년 이후면서 국적이 한국이 아닌 멤버의 이름만 남긴 배열 만들기
// filter, map 모두 사용
console.log(
  twice
    .filter((member) => member.birth >= 1997 && member.country !== "한국")
    .map((member) => member.name)
);

 

 

 

 

---

 

 

map으로 리스트 렌더링하기

map과 filter는 react에서는 리스트를 렌더링할 때도 유용하게 쓰인다.

 

 

map을 안쓰면 위의 이미지처럼 div요소를 계속 사용하면서 동시에 인덱스 번호도 다 바꿔줘야 각각의 멤버들을 출력할 수 있다....

하지만 map 메서드를 사용하면 배열의 요소로 있는 데이터들을 jsx 요소로 반환해 화면에 나열해준다.

 

function App() {
  return (
    <>
      {twice.map((member) => 
        <div key={member.name}>
          이름 : {member.name}, {member.birth}년생, 국적 : {member.country}
        </div>
      )}
    </>
  );
}

 

이 때 key prop은 배열을 렌더링할 때 항목을 식별하기 위해 사용되는 속성으로, 각 항목이 고유하다는 뜻이다.

 

리액트에서는 가상 DOM을 쓰면서 변경 사항을 식별하는 과정이 필요한데, 이 식별자가 있어야 효율적으로 변경된 항목만 업데이트를 할 수 있게 때문에 없어도 지금은 실행에 크게 문제는 없지만 전체 리스트를 다시 렌더링하는 것으로 간주되어 성능 저하가 발생할 수 있다.

 

이번 예제에서는 그룹의 멤버 이름은 고유하므로 멤버의 이름을 key로 설정했다.

하지만 위의 배열과는 달리 여러 아이돌들이 많이 모인 배열이라면 누구 하나쯤은 이름이 겹칠 수도 있기 때문에, 미리 배열을 선언할 때 데이터에 id를 추가해주고 이를 Key로 활용하는 것이 좋다. 

또는 uuid 패키지를 사용할 수도 있는데,  npm install uuid 로 설치해 사용할 수 있다.

 

import "./App.css";
import { v4 as uuidv4 } from "uuid";

const twice = [
  { id: uuidv4(), name: "나연", birth: 1995, country: "한국" },
  { id: uuidv4(), name: "정연", birth: 1996, country: "한국" },
  { id: uuidv4(), name: "모모", birth: 1996, country: "일본" },
  { id: uuidv4(), name: "사나", birth: 1996, country: "일본" },
  { id: uuidv4(), name: "지효", birth: 1997, country: "한국" },
  { id: uuidv4(), name: "미나", birth: 1997, country: "일본" },
  { id: uuidv4(), name: "다현", birth: 1998, country: "한국" },
  { id: uuidv4(), name: "채영", birth: 1999, country: "한국" },
  { id: uuidv4(), name: "쯔위", birth: 1999, country: "대만" },
];

function App() {
  return (
    <>
      {twice.map((member) => (
        <div key={member.id}>
          이름 : {member.name}, {member.birth}년생, 국적 : {member.country},
          아이디 : {member.id}
        </div>
      ))}
    </>
  );
}

export default App;

 

 

또는 인덱스 값으로 아이디를 설정해도 되는데, 이는 배열이 변경되었을 때 고유성을 보장할 수 없기 때문에 사용하지 않는 편이 좋다.

 

 

 

filter와 map으로 리스트 렌더링하기

 

filter는 배열은 반환해주지만 map()과 달리 화면에 바로 렌더링하지 못한다. 

반면, map은 react 요소를 포함한 배열을 반환할 수 있기 때문에 바로 화면에 렌더링을 해줄 수 있다.

때문에 filter를 쓸 때는 뒤에 map으로 react 요소를 반환해야 올바르게 렌더링이 가능해진다.

 

function App() {
  return (
    <>
      {twice
        .filter((member) => !member.country="한국")
        .map((member) => (
          <div key={member.name}>
            이름 : {member.name}, {member.birth}년생, 국적 : {member.country}
          </div>
        ))}
    </>
  );
}

 

한국 국적이 아닌 멤버들만 filter한 후, map으로 반환