[ToyProject-Todomate] 투두메이트 클론 프로젝트 30

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

 

editGoal 함수를 만들어 보자

 

 

editGoal은 인자로 editGoalItem.item을 받아온다. 즉, 수정을 위해 선택된 title의 id와 수정된 title을 인자로 넘겨받는다.

그래서 editGoal 함수를 만들고 e를 찍어보면 다음과 같이 나온다.

 

 

//목표 수정 함수
function editGoal(e){
    console.log('e : ', e)
}

 

 

 

 

현재 goal state의 id값과 넘어온 e의 id 값이 같은 것의 인덱스 번호를 찾아야 하기 때문에

findIndex 메소드를 이용해 인덱스를 찾아보자.

 

thisItems 라는 변수를 선언해서 goal state를 카피해주고 idx 라는 변수를 하나 선언해준다.

idx 에는 id 값을 비교해서 인덱스를 찾을 수 있도록 조건을 작성해준다.

 

 

 

findIndex 메소드 사용

 

 

//목표 수정 함수
function editGoal(e){
    console.log('e : ', e)

    const thisItems = goal.items; // goal State 원본 카피

    let idx  = thisItems.findIndex((item)=>{ return item.id === e.id })//findIndex 사용
    console.log('idx  : ' , idx );
}

 

이렇게 하면 콘솔에 idx 에 할당된 인덱스 값이 나오게 된다. 

 

 

 

 

이 idx 값을 이용해서 goalChange 함수를 통해 state 값을 변경해주면 된다.

 

그래서 아래와 같이 입력했는데...

 

 

goalChange(thisItems[idx].title = e.title); //goalChange를 이용해 state 변경

 

 

갑자기 오류가 없던 Goal에서 렌더링 오류가 막 생기기 시작했다.

 

 

 

 

 

검색을 해봐도 오타 때문이라고 하는데...

위의 goalChange를 실행하고부터 오류가 났으니 당연히 goalChange에서 뭔가 문제가 있는 것 같고...

카피를 해서 내용을 바꾼 것을 할당해야 하는데 저렇게 하면 재렌더링 될 때 오류가 난다는 

바로 그 state 직접 바꾸기를 내가 시도한 것일까?

 

 

 

goalChange로 State 변경하기

 

 

다시 정신을 차리고 ㅠㅠㅠ

thisItems 으로 복사한 state의 idx 번째의 title을 e로 받아온 title로 변경하고, thisItems를 goalChange로 변경한다..

 

 

  //목표 수정 함수
  function editGoal(e){

    const thisItems = goal.items; // goal State 원본 카피
    
    let idx  = thisItems.findIndex((item)=>{ return item.id === e.id })//findIndex 사용
    thisItems[idx].title = e.title;
    goalChange( {items : thisItems } ); //goalChange를 이용해 state 변경
    document.querySelector(`#ID-${idx}`).value = '';
    console.log('edit items :', goal.items)
  }

 

 

정상적으로 수정이 된다...!!

 

 

 

 

 

 

그런데 수정되자마자 두번째를 클릭했을 때는 수정이 되지 않기 때문에 수정이 되면 아주 새로고침을 한 번 해주던지

나중에는 GoalForm과 GoalEditForm을 모두 별도의 페이지로 만들어 줄 예정이라 

그때도 에러가 나면 수정해봐야겠다.

 

 

내일은 GoalForm과 GoalEditForm 컴포넌트들을 별도의 페이지로 나타나게 해봐야겠다.

 

 

 

점점 뭔가 기능을 구현한다고 느끼면서도 속도가 너무 느리다는 생각에 자괴감이 막 들고 있다.

다른 분들의 속도에 맞춰 가야하는데 리액트가 제대로 이해되지 않아서 그런걸까 눈물나게 어렵네ㅠㅠ

 

너무 바보같이 코드를 짜는 것 같지만 기능이 돌아가니 얼추 하는거 같기도 하고...

자꾸 답답할 뿐이다 ㅠㅠㅠㅠㅠ