221128 TIL

오늘 리액트 입문주차 개인과제를 vercel을 이용하여 배포하고, README도 작성해보았다.

그리고 몇가지 코드를 수정한 것이 있어 이걸 작성해보고자 한다.

  //Work 추가하기 버튼핸들러
  const addWorkHandler = () => {
    const newWork = {
      id: works.length+1,
      title: title,
      desc: desc,
      isDone: false,
    };
    setWorks([...works, newWork]);
    //인풋태그value 제거하기위함
    setTitle('');
    setDesc('');
  };

State에 값을 추가하는 버튼에대한 핸들러함수이다.

여기서 id값을 works.length+1로 주는데, 스터디팀원분인 이재정님께서 문제점을 제기해주셨다.

우리는 삭제버튼도 있기 때문에 id값을 저렇게 주면안된다는 것이다.

예를들어 1 2 3 4 5 각각의 id값을 가지는 state들이 존재한다고 치자.

그럼 지금의 works.length는 5이다. 여기서 id가 3인 state를 제거하면 works.length가 4가 된다.

state id = 1 2 4 5

그 다음 state값을 하나 추가하게되면 새로운 state는 id값이 works.length+1인 5가 생성이된다.

state id = 1 2 4 5 5

 

그런데, 특정 State를 제거하는 버튼 핸들러함수를 보면,

  //Work 제거하기 버튼핸들러
  const removeWorkHandler = (id) => {
    //해당 id값만 제거
    const newWorkList = works.filter((work) => work.id !== id);
    //state 재할당
    setWorks(newWorkList);
  };

해당 버튼의 id값을 제외한 나머지들을 다시 State로 선언하는 방식인데, 여기서 id가 5인 버튼을 제거하려고하면

state id값이 현재 1,2,4,5,5로 되어있기 때문에, 제거하려는 state와 다른 state가 동시에 제거가된다.

 

따라서 id값을 부여하는데 다른 방법으로 해야한다.

  //Work 추가하기 버튼핸들러
  const addWorkHandler = () => {
    const newWork = {
      id: Math.random() * 100,
      title: title,
      desc: desc,
      isDone: false,
    };
    setWorks([...works, newWork]);
    //인풋태그value 제거하기위함
    setTitle('');
    setDesc('');
  };

추천해주신 난수생성 방식이다. id값이 난수이다보니, 값이 겹칠 일이 없어 위와같은 일이 일어나지 않을 것이다.

시험해본 결과로도 동일한 id값이 제거되는 일이 없었다.