setState 리렌더링이 일어나지 않아, 모멘텀의 투두를 리액트로 바꾸기

 const onSubmit = () => {
    const addValue: any = props.value;

    const listArr = list;

    listArr.push(addValue);
    console.log("listArr:::", listArr);
    setList(listArr);
    console.log("list:::", list);
    inputRef.current.value = "";
  };

return (
    <div>
      <ol id="answer">
        {list?.map((el: any, i: number) => (
          <li key={i}>{el}</li>
        ))}
      </ol>
      <Input
        placeholder={placeholder}
        onChange={onChangeInput}
        onKeyDown={onKeyPress}
        ref={inputRef}
      />
    </div>
  );
}

콘솔로보면 리스트는 변하는데...왜 리렌더링이 안될까?!

 

검색을 해보니, 

위에서 const listArr = list; 를 받아옴 -> 가리키는 곳이 같은 애가 복사됨(1004번지를 가리키는 애가 둘이 됨)

1004번지를 가리키고 있는 복제된 애한테 push를 함

setList(복제된 애); 는 복제된 애가 가리키고 있는 곳으로 세팅해줄 것임

근데 복제된 애도 1004번지, 원래 list도 1004번지를 가리키고 있기 때문에 변화가 없는 것으로 판단되고 리렌더가 일어나지 않는다.

 

 

인 것 같다.

 

  const addValue: any = props.value;

    const listArr = [...list];

    listArr.push(addValue);

    setList(listArr);

이렇게 써도 되고

 

 const addValue: any = props.value;

    const listArr = list;

    listArr.push(addValue);

    setList([...listArr]);

이렇게 써도 된다! 

 

 

 

https://icecokel.tistory.com/22

setState로 리렌더링이 안 되는 이유..

 

 

---

  const onSubmit = () => {
    if (list.length > 2) return;
    const addValue: any = props.value;

    const listArr = list;

    listArr.push(addValue);

    setList([...listArr]);

    inputRef.current.value = "";
  };


  return (
    <div>
      <ol id="answer">
        {list?.map((el: any, i: number) => (
          <li key={i}>{el}<button>X</button></li>
        ))}
      </ol>
      <Input
        placeholder={placeholder}
        onChange={onChangeInput}
        onKeyDown={onKeyPress}
        ref={inputRef}
      />
    </div>
  );
}

이제 세 개까지만 받는 것도 되고, 지우는 걸 만들어줘야 하는데 느낌대로 해보겠다...

X버튼을 달아줌 

 

 

const onClickDelete = (event: any) => {
    // event 로 들어온 애랑 같은 애는 없애구
    console.log(event.target.value);
    const tempArr = list.filter((el) => el !== event.target.value);
    console.log(tempArr);
    setList([...tempArr]);
  };

생각없이 이렇게 썼는데 생각해보니 event.target.value하면 안되지,,,! 

 

target.parentelement도 쓰고 해봤는데 잘 안됐다...

 

const onSubmit = () => {
    if (list.length > 2) return;
    const addValue: any = props.value;

    setList([
      ...list,
      {
        id: Date.now(),
        text: addValue,
      },
    ]);
    
 }

일단 이렇게 아이디랑 같이 넣어주는 식으로 바꿨다.

 

    const tempArr = list.filter((el) => el.id !== event.target.id);

이건 왜 안되는거지? 

 

el.id는 넘버고 event.target.id는 스트링이었다..!!!! 

 

  const onClickDelete = (event: any) => {
 
    const tempArr = list.map((el) => {
      if (el.id !== Number(event.target.id)) return el;
    });

    setList([...tempArr]);
  };
  const onKeyPress = (event: any) => {
    if (event.key === "Enter") {
      onSubmit();
    }
  };

왜 filter는 안되는거지? 

 

이제 지워지긴 하는데 정말 텍스트만 지워진다. 

 

undefined기 때문에... 

 

근데 filter를 쓰면 통으로 다 사라져 왜??? 

어떤 요소도 테스트를 통과하지 못했다~~~~~~~~~~~~

그럼 전부 다 아이디가 같다는소리냐??~~!~!~@~뭔소리야 ㅠ ㅠ ㅠㅠ ㅠㅠ ㅠ

 

조건 바꿔도 전부 다 지워지네 내가 뭔갈 잘못쓰고 있는게 틀림없음

 

 

괄호 문제였다. 

{ } 괄호를 빼니 잘 작동~

 

const onClickDelete = (event: any) => {
    const tempArr = list.filter(
      (el) =>
        // if (el?.id !== Number(event?.target.id)) return el;
        el?.id !== Number(event?.target.id)
    );
    console.log(tempArr);
    setList([...tempArr]);
  };

 

일단 요기까지