3가지 data api : 서버의 작업들을 클라이언트 측으로 옮겨왔다고 생각하면 된다
컴포넌트 생성 전에 컴포넌트에 데이터 전달
loader의 호출 시점은 컴포넌트가 랜더링 되기 전
즉 컴포넌트가 렌더링 되기 전에 api와 통신후 응답을 받고나서 렌더링에 들어감
-> 이를 통해 사용자 경험 향상, 동시에 데이터 가져오기 및 랜더링 관련 개발자 경험을 개선, 컴포넌트 마운트 단계에서 상태에 api에서 받아온 값이 화면에 뿌려지지 않는 이슈를 해결
각 route 파일에 loader함수를 만든 뒤 이를 export하여 사용하는게 일반적이다.
loader 함수가 값을 리턴하면 useLoaderData()
로 컴포넌트에서 데이터를 받을 수 있다.
+ 상위 경로에서 loader를 통해 가지고 있는 데이터를 하위 경로인 자식 컴포넌트들이 가질 수도 있는데 상위 경로에 id키를 추가하고 값을 지정해둔다. 그 id에 해당하는 값을 useRouteLoaderData()
에 인자로 던져준다.
즉 useLoaderData()
가 loader가 지정된 경로의 컴포넌트에서 사용한다면, useRouterLoaderData('id)
는 loader가 지정된 경로늬 하위 경로에 해당하는 컴포넌트에서 사용)
GET 요청 시 loader가 호출된다
url에 form
과 같은 리퀘스트를 보낼 때 데이터를 처리하는 부분이다
클라이언트 사이드에서 form
(특정 url에 데이터를 전송해서 처리하는 요청)을 처리하기 위해 react router는 Form
을 사용한다.
form
을 사용하면 서버에 요청을 보내고,Form
을 사용하면 클라이언트측에 요청을 보낸다.
클라이언트 측에서 요청을 받았다면 이는 action에서 처리하는데 POST 요청 시 호출된다.
formData()
를 사용하면 action함수에 전달된 데이터를 받을 수 있다.
url을 변경하지 않고 요청한 url에 데이터를 요청한다
데이터를 navigate하지 않고 데이터를 변화 시킬때 사용
즉 공통 컴포넌트가 있거나 같은 페이지에서 여러번 사용되는 컴포넌트가 있을 경우, 배후에서 데이터만 업데이트하거나 받으려고할 때 유용하다.
navigate하지 않고 Form
을 이용해 loder
, action
과 커뮤니케이션 할 수 있다느 것이 form과의 가장 큰 차이점