나의 개발 성장일지
itemmanage에서 삭제시 바로 적용시키기 본문
핵심은 비동기적인걸 필요할땐 동기적으로 만들어야한다.
컴포넌트 마운트시
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가 변했으므로
'개인 프로젝트 > 쇼핑몰 만드는 과정' 카테고리의 다른 글
| itemmanage페이지에 비동기제어 하기위한 생각 (0) | 2023.01.01 |
|---|---|
| 모든원인은 비동기처리를 못해서 (0) | 2022.12.31 |
| 함수형 컴포넌트 생성주기 (0) | 2022.12.31 |
| ***리액트에서 가장 중요한것 (0) | 2022.12.31 |
| 배포하기 (0) | 2022.12.30 |