상품관리)비동기제어 해결한거 정리하기!!!!!!!!!!!!!

한달동안 정말 많이 고민했는데 일단 임시 해결방안을 찾은거같다.

 

1.itemmanage페이지에서 삭제버튼 구현한 방법

 

1-1 컴포넌트 마운트시 useeffect로 서버에서 상품데이터 가져오는걸 가장 늦게 가져온다

1-2 상품데이터가 도착하면 setitem에 해당 객체를 넣어줍니다

1-3 다만 usestate의 기본값의 자료형이 []인 배열객체 이므로 주소값이들어가있다

1-4 setitem파라미터와 item의 주소값이 동일하니까 settiem은 실행되지않는다

1-5 임시로 주소값을 바꿔줘야하니까 copyitem =  [....items]를 사용하여 주소값을 바꿔준다

1-6 copyitem을 setiitem에 넣으면 서로 다른주소값이니까 item의 값이 바뀌고 컴포넌트가 재렌더링이된다->dom은 존재하는상태->새로고침x

1-7 deleteitem이벤트핸들러를 호출하면 서버로 요청하고 promise객체가 생성된다

1-8 promise객체는 실행순서를 정할수있게 해주며 실행 결과에따라 루트를 정할수있게해준다

1-9 axios가 끝나면 promise객체가 생기고 .then을 붙여 콜백함수처럼 사용가능하다-> 함수파라미터에 함수를 넣는것이니까 axios의 자원을 사용가능하다

1-10 .then뒤에 콜백함수를 사용하여 연달아서 setitem으로 item을 바꿔준다

 

1-11 item이 바뀌었으므로 재렌더링이되면서 useeffect가 같이실행된다 의존성에 item state를 넣어줬기때문이다

1-12 useeffect가 실행되면서 axios에 상품리스트를 불러온다 

1-13 상품리스트를 서버로부터 받아와서 .then에 콜백함수에 결과값을 파라미터로 넣어준다-> 콜백함수는 부모함수의 자원을 사용가능하다.

1-14 서버에서 오는 데이터는 다시 메모리에 새로운 주소값을 부여받으므로 현재 item에 존재하는 주소값과달라서 그냥 setitem에 넣어줘도된다.

*****중요******

1-15 useeffect에 items를 의존성으로 준 이유는 삭제버튼과 연계시키기위해서다

1-16 setitems에 객체를 그냥넣어버리면 무한 재렌더링이걸린다

1-17 조건을 객체의 주소가아니라 객체의 값이 변했을때로 설정해줘야한다

1-18 삭제가 목적이므로 현재 item의 배열의 길이와 서버에서 오는 객체의 길이가 다를때만 setitem을 실행하도록한다

1-19 즉 서버데이터와 현재 데이터의 길이를 비교하여 setitem에 객체를 넣어줌으로써 무한재렌더링을 막을수있다

1-20 컴포넌트 업데이트관점에선 괜찮지만 컴포넌트 마운트시에도 setitems가 실행되는지확인해야한다

1-21 정확한 오더는 컴포넌트가 마운트되었을때 업데이트되었을때 서버데이터와 현재state데이터를 비교해서 setitem을 실행해주세요이다.