map 과 filter 차이

역시 내가 아는 것은 아는 게 아니였다ㅋ_ㅋ

 

문제점

handleItemChange 함수가 실행 될 때 아래와 같은 에러가 뜸.

id 뿐 아니라, id를 제거하면 edit에도 같은 에러문이 뜸.

undefined가 뜨길래 배열을 못 읽어오는 것 같았고, 시점(?)의 문제(??)인건가 싶어서 손을 놓으려고 할 찰나.. 코드를 다시 보니 map 사용법의 문제가 있었다. 

  // 삭제
  const handleDelete = (id) => {
    const resultLists = todoLists.filter((list) => list.id !== id);
    setTodoLists(resultLists);
  };

  // 수정 상태
  const handleEdit = (id) => {
    const resultLists = todoLists.map((list) => {
      if (list.id === id) return { ...list, edit: !list.edit };
      return list;
    });
    setTodoLists(resultLists);
  };

  // 추가된 리스트 아이템 수정
  const handleItemChange = ({ value }, id) => {
    const updatedList = todoLists.map((list) => {
      // 다른 곳에서는 return 문을 써주었는데 요놈한텐 안 써줬다 ^ㅅ^)v...
      list.id === id ? { ...list, value } : list;
    });

    setTodoLists(updatedList);
  };
  
  
  (중략)
  
  
  return (
  	... 
    
    <ul className="App-todos">
        {todoLists.map(({ id, value, edit }) => (
          // 
          <li key={id}>
            {edit ? <input type="text" value={value} onChange={(e) => handleItemChange(e.target, id)} /> : <span>{value}</span>}
            <button onClick={() => handleEdit(id)}>{edit ? "완료" : "수정"}</button>
            <button onClick={() => handleDelete(id)}>삭제</button>
          </li>
        ))}
    </ul>
  	
    ...
  )

 

문제가 되는 함수를 이렇게 return 문을 명시하여 고쳐줬더니 정상작동함.

  const handleItemChange = ({ value }, id) => {
    const updatedList = todoLists.map((list) => {
      return list.id === id ? { ...list, value } : list;
    });

    setTodoLists(updatedList);
  };

 

---

filter 함수와 map 함수는 각각 다른 목적을 가지고 동작한다.

• map 함수: 배열의 각 요소를 변환하여 새로운 배열을 생성합니다. map 함수는 변환된 값을 반환하여 새로운 배열을 구성합니다. 따라서 return 키워드를 사용하여 변환된 값을 명시적으로 반환해야 합니다.
• filter 함수: 주어진 조건을 만족하는 요소로 이루어진 새로운 배열을 생성합니다. filter 함수는 조건을 만족하는 요소만을 남기고, 나머지 요소는 제외하여 새로운 배열을 구성합니다. filter 함수는 조건을 만족하는 요소를 그대로 반환합니다. 이때 return 키워드를 별도로 작성할 필요는 없습니다.

 

결론

filter 함수는 이미 조건을 만족하는 요소만을 남기는 것이 목적이기 때문에, return 키워드를 별도로 작성하지 않아도 자동으로 조건을 만족하는 요소를 반환한다. 그리하여 return 키워드를 명시하지 않아도 된다.

 

반면에 map 함수는 변환된 값을 명시적으로 반환해야 새로운 배열을 생성할 수 있음.