[REACT] 클릭시 카테고리 바꾸기2

학습일 : 2023. 04. 20

---

 

저번글에 이어서 이번 글에서는

클릭시 카테고리를 바꾼 다음

새로운 배열을 만들어

지금의 카테고리 외의 버튼만 나올 수 있게 만들어 보도록 하겠다.

 

원리를 먼저 살펴보자면

food 배열

그리고 Index가 될  target

target의 앞부분, 새로 넣어줄 todo,  target의 뒷부분을 원소로 가질 새로운 배열을 위해

slice를 이용하여 새로운 원소로 교체해 볼테다.

 

 

이렇게 하면 target이었던 mango와 똑같은 자리를 새 원소로 성공적으로 교체하게 되었다.
front와 back을 구하고 그 사이에 새로운 원소를 넣는 것이다.

 

---

이 방법을 그대로 적용하여 해보도록 하자.

food 배열은 oldToDos라고 생각하면 되고
target은 targetIndex라고 생각하면 되겠다.


<ToDo.tsx>

기준이 되는 targetIndex 앞까지를 자르고

다음으로 newToDo를 넣어주고

그 다음 targetIndex 다음부터 끝까지를 잘라서 리턴하도록 한다.

function ToDo({ text, category, id }: IToDo) {
  const setToDos = useSetRecoilState(toDoState);
  const onClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    const {
      currentTarget: { name },
    } = event;

    setToDos((oldToDos) => {
      const targetIndex = oldToDos.findIndex((toDo) => toDo.id === id);
      const newToDo = { text, id, category: name };
      return [...oldToDos.slice(0, targetIndex), newToDo, ...oldToDos.slice(targetIndex+1)];
    });
  };

원래의 toDo를 업데이트 하고 있는 것이 아닌
원래의 toDo는 지우고, 새 배열을 만들고 있는 것이다.
새 배열에는 target 이전의 모든 원소들이 들어가고
newToDo가 들어가고
target 이후의 모든 원소들이 들어가게 된다.


실행결과
버튼을 눌러 카테고리가 바뀌게 되면
그 카테고리를 제외한 이름의 버튼만 보이게 된다.