코딩일기 4-5. CRUD완성!! 에러해결 🤘

오늘은 나름 css도 넣어서 리액트로 간단한 crud를 완성했다!!

💡 만든기능
1️⃣ input 2개 추가하기 create
2️⃣ read
3️⃣ 삭제하기 delete
4️⃣ 클릭 → 이름색 바꾸기 수정하기

✅ 여러개의 input의 상태를 한꺼번에 관리하기 위해 name을 이용

✅ input의 상태관리를 useState hook이용

✅ 고유한 key부여를 위해 uuid사용

id값에 uuid로 고유한 값 만듦 → 그 id를 key값으로 넣어줌

각각 다른id값을 이용, id비교를 통해 → 1. 삭제하기

                                                           2. 수정하기

✅ toggle 이용 → 수정하기

const onToggle = (id) => {
    setUsers(
      users.map((item) =>
        item.id === id ? { ...item, active: !item.active } : item
      )
    );
  };

이거 하나를 만들면서 나름대로 여러가지 에러를 만나고 해결하는 과정을 거쳤는데, 따로 자세하게 글을 써서 과정을 적어야겠다.

 

 

추가와 삭제를 할때는 id값을 이용한다.

uuid를 통해서 고유한 id의 값을 만들어줬는데 문제는 uuid를 처음써봐서 사용법이 조금 미숙했던 점이 있었던것같다.

onCreate에서 id값을 관리하는 코드를 넣어줬어야하는데 어느지점에 어떻게 넣는지 이번에 깨달았다.

 

이거때문에 계속 삭제와 수정이 모든 컴포넌트가 하나처럼 묶여서 움직이는 현상 ㅠㅠ 이 있었는데, 

다 해결을 못하고 집에온게 마음에 걸려서 더글로리를 틀어놓고 (더글로리2 나오는날 ㅋㅋ)

계속 코드를 보면서 해결하려고 이렇게 저렇게하다가

방법을 찾았다..!!!!!!! 해결완료 🥳🥳

 

완전 뿌듯하다 ㅎㅎㅎㅎㅎ

 

또 여러번 만들면서 완전-히 내것이 될때까지 해야지!! 이제 거의 다 온것같다

이제는 빨리 만들수 있어서 이걸 진행하면서 다음스텝으로 갈수있을듯 !