✍🏻 [Code Camp_TIL] 7일차: Map & Filter

Map

지금까지는 반복에 for문을 사용했었는데, 실무에서는 map과 filter를 더 많이 사용한다고 한다. map과 filter는 모두 배열의 내장함수이기 때문에 배열과 함께 사용해야 한다.

map 사용방법

const classmates = ["철수", "영희", "훈이"]
classmates.map((el) => (el + "어린이"))
// ["철수어린이", "영희어린이", "훈이어린이"]

map은 배열 안의 값들을 한번에 변형시킬 때 사용하면 편리하다. 위의 코드는 map을 사용하여 classmates라는 배열 안의 모든 요소 뒤에 각각 "어린이"라는 문자열을 더한 것을 나타낸다.

여기서 el은 classmates의 요소들이 들어갈 파라미터(매개변수)이다. 매개변수의 이름은 마음대로 정해도 된다.

**객체**가 원소인 배열에서는 `map`을 어떤 식으로 이용할 수 있을까? classmate 배열에 3개의 객체가 담겨있고, name key의 값 뒤에 각각 "어린이"를 더하고, school이라는 새로운 key와 "떡잎유치원"이라는 value를 더해보자.

const classmate = [{ name: "철수" }, { name: "영희" }, { name: "훈이" }];

  classmate.map((item) => ({
    name: item.name + "어린이",
    school: "떡잎유치원",
  }));

	// 결과
[
			    { name: "철수어린이", school: "떡잎유치원" },
			    { name: "영희어린이", school: "떡잎유치원" },
			    { name: "훈이어린이", school: "떡잎유치원" },
			  ];

Map과 HTML 연결

Map은 컴포넌트의 return값 안에서 많이 사용하게 되는데, 이 경우에는 map을 중괄호로 감싸서 사용한다.

const FRUITS = [
  { number: 1, title: "레드향" }, 
  { number: 2, title: "샤인머스켓" }, 
  { number: 3, title: "산청딸기" },
  { number: 4, title: "한라봉" },
  { number: 5, title: "사과" },
  { number: 6, title: "애플망고" },
  { number: 7, title: "딸기" },
  { number: 8, title: "천혜향" },
  { number: 9, title: "과일선물세트" },
  { number: 10, title: "귤" },
];

FRUITS 배열 안의 각 객체들을 아래의 형식처럼 인기검색어 목록으로 만드는 작업을 해보자.

1 레드향
2 샤인머스켓
3 산청딸기
...

다음과 같이 map을 사용해주면 된다. div 태그로 요소들을 나타내줄 형태를 감싸주는 방식으로 html과 연결해서 사용할 수 있다.

export default function MapFruitsPage() {
 
  return(
    <div>
        {FRUITS.map((el) => (
          <div>
            {el.number} {el.title}
          </div>
        ))}
    </div>
  )
}

Filter

Filter는 단어에서 유추할 수 있듯이 특정 조건을 filter로 설정하여 객체 혹은 배열의 각 원소를 검사하여 조건에 맞는 것들만 결과값으로 도출하는 매서드다. 아래의 코드와 같이 매개변수를 지정해주고, 매개변수를 활용해서 filter 소괄호 안에 조건을 삽입하면 된다.

const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

num.filter((item) => item <= 8);
// [1, 2, 3, 4, 5, 6, 7, 8]

map과 filter를 모를 때, for 문을 이용해서 일일이 얼마나 반복하고 언제까지 반복해줄지를 설정하는 과정이 번거로웠는데 map과 filter를 활용해보니까 훨씬 간단하게 배열 안 요소들을 컨트롤 할 수 있는 것 같다!

배열을 한번에 조작해주고, 특정 요소들만 조건을 설정해 골라서 원하는 결과값을 만들어낼 수 있는 강력한 매서드임에 틀림없다. 잊지 말고 복습하자 꼭..!

---