findIndex()로 카테고리 변경 처리하기

📋 findIndex

배열에 제공된 테스트 함수를 충족하는 첫 번째 요소의 인덱스를 반환하는 함수
테스트 함수를 충족하는 함수가 없다면 -1 반환
매개변수로 콜백함수를 사용하며, boolean값을 반환할 수 있도록 해야 한다.

testFn

매개변수인 testFn은 요소가 발견되었음을 나타내는 boolean값을 반환할 때까지 배열의 각 요소에 대해 실행하는 함수이다.

testFn의 매개변수로는 3가지가 있다.

1. 처리중인 배열의 현재 요소
2. 처리 중인 현재 요소의 인덱스
3. 처리 중인 현재 배열

프로젝트 예시

현재 진행중인 투두리스트 프로젝트를 예시로 들어보자.

투두의 기본 카테고리는 "TO_DO"이며, "DOING", "DONE"이 추가로 있다.

버튼 별로 카테고리의 텍스트를 갖고 있는데 해당 버튼을 클릭 하면 카테고리가 버튼의 텍스트로 변경되어야 한다.

아래와 같은 카테고리가 있다고 가정해보자.

2번 인덱스의 카테고리를 변경하고자 한다면 해당 인덱스에 접근해 수정해주어야 한다.

해결 방법은 아래와 같다.

1. props로 전달받은 id와 찾고자 하는 리스트의 id가 일치하는지 판별해 인덱스 반환
2. bracket notaion으로 변경할 리스트에 접근
3. splice()를 사용해 변경할 리스트의 인덱스를 제거 및 업데이트 된 카테고리 추가

 // 카테고리 변경 함수
const handleChgCategory = (e : React.MouseEvent<HTMLButtonElement>) => {
        setToDos((prevToDoList) => {
            // 찾을 투두리스트 인덱스
            const toDoIndex = prevToDoList.findIndex((toDo) => toDo.id === id);

            // 과거 투두리스트
            const prevToDo = prevToDoList[toDoIndex];
            // 변경된 투두리스트
            const newToDo = {id : id, text : text, category : e.currentTarget.name as ToDoListItfc["category"]};

            // 변경 내역 적용
            const updatedToDo = [...prevToDoList];
            prevToDoList.splice(toDoIndex, 1, newToDo);
            
            return updatedToDo;
        }) 
    };

각 버튼을 클릭하면 버튼 텍스트로 카테고리가 변경되는 것을 확인할 수 있다.

참고

노마드코더
Array.findIndex