목표
1. State의 원리
2. 최신데이터 가져오기 (refetch)
3. 목록에서 삭제하는 방법State의 원리.
이전에 스테이트에 관해 배웠다. 이번에는 동작 원리에 대해 알아보고
그 동작의 단점을 피하는 방법을 알아보자.
스테이트에 값이 들어가면 (setState) 페이지컴포넌트 전체를 다시실행한다.
이를 리렌더링이라고 하고 이 과정에 너무 많은 재실행, 즉 한번에 많은 State가 작동하면
페이지에서 에러를 일으킨다.
이를 해결하는 방법은 다음 수업때 배우기로 했다. 아마 다음 포스팅에 따로 기재할 것 같다.
우선은 리렌더링이 필요없는 코드들은 페이지함수의 범위에서 벗어나게 위치해주면 될 것 같다.
최신 데이터 가져오기.
오늘 삭제버튼을 누르면 삭제api가 작동해 데이터를 db에서 삭제하고
페이지에서도 지워지는 걸 배웠다.
하지만 refetch를 사용하기 전에는 삭제버튼을 누르고 새로고침을 해야지만 데이터가 삭제된 걸 확인할 수 있엇다.
이런 이유때문에 refetch라는 걸 사용했는데.
만약 onclikc이라는 이벤트로 삭제를 했다면 그 함수안에 refetch란 코드로 삭제함과 동시에 불러오기를 실행하는 것이다.
이외 메모
-프롭스 드릴링: props가 자식한테 넘어가고 그 자식의 자식한테도 보내는것이다, 프롭스드릴링을 많이사용하는것은
그렇게 좋은 방법이 아니라고 한다.
-jsx에도 변수를 지정할수 있다. 이 방법을 통해 api를 이용하여 페이지에 db내용을 즉각적으로 표현할 수 있엇다.
