나의 개발 성장일지

itemmanage에서 삭제시 바로 적용시키기 본문

개인 프로젝트/쇼핑몰 만드는 과정

itemmanage에서 삭제시 바로 적용시키기

qkq5821 2022. 12. 31. 23:42

핵심은 비동기적인걸 필요할땐 동기적으로 만들어야한다.

 

 

컴포넌트 마운트시

 

1.useeffect를 사용하여 렌더링후 서버로 요청후 상품 목록을 받아옴

2.상품목록이 오면 상품리스트들을 [...item]을 사용하여 주소를 바꾼다.

3. 해당 객체배열을 setitem에 넣으면  객체니까 주소가 다르다고 인식하고 컴포넌트를 렌더링하여 값을 바꿔준다.

4.useeffect에 [] 의존성을 걸어놔서 컴포넌트 마운트하여 dom에 생성될때만 적용한다./

 

컴포넌트 업데이트시

 

1.삭제버튼을 누르면 item state에서 값을 바꿔야한다

2.바꾸는법은 item값에 현재 db에값을 넣어줘야한다.->db에서바꾸고 state를 필터로 사라지게 만들기 너무 비효율적임->db의 값을 가져와서 최신화시키는게 맞음

3. 상품번호를 가진 태그에 onclick이벤트를 걸어준다.

4.onclick이벤트에 db에서 해당 번호의 상품을 삭제해준다.

5. 상품이삭제된결과를 어디서받아야할까?

5-1 useeffect에 item의존성을 부여해놓고 조건을달아 setitem을 걸어준다면 되지않을까?

5-1-1 onclick이벤트로 삭제누르면 서버로 해당 태그에 상품번호를 삭제 해준다

5-1-2 이벤트내에서 삭제후 db에서 가져와야한다 둘다 비동기적이다

5-1-3 둘다 비동기적일때 어떻게 순서를줄수있을까 -> 클릭이벤트에서 삭제하고 item state에 새로운주소값을넣어준다

5-1-4 state가 변했으므로