3가지 data api : 서버의 작업들을 클라이언트 측으로 옮겨왔다고 생각하면 된다

Loader

컴포넌트 생성 전에 컴포넌트에 데이터 전달
loader의 호출 시점은 컴포넌트가 랜더링 되기 전
즉 컴포넌트가 렌더링 되기 전에 api와 통신후 응답을 받고나서 렌더링에 들어감
-> 이를 통해 사용자 경험 향상, 동시에 데이터 가져오기 및 랜더링 관련 개발자 경험을 개선, 컴포넌트 마운트 단계에서 상태에 api에서 받아온 값이 화면에 뿌려지지 않는 이슈를 해결

각 route 파일에 loader함수를 만든 뒤 이를 export하여 사용하는게 일반적이다.
loader 함수가 값을 리턴하면 useLoaderData()로 컴포넌트에서 데이터를 받을 수 있다.

＋ 상위 경로에서 loader를 통해 가지고 있는 데이터를 하위 경로인 자식 컴포넌트들이 가질 수도 있는데 상위 경로에 id키를 추가하고 값을 지정해둔다. 그 id에 해당하는 값을 useRouteLoaderData()에 인자로 던져준다.
즉 useLoaderData()가 loader가 지정된 경로의 컴포넌트에서 사용한다면, useRouterLoaderData('id)는 loader가 지정된 경로늬 하위 경로에 해당하는 컴포넌트에서 사용)
GET 요청 시 loader가 호출된다

Action

url에 form과 같은 리퀘스트를 보낼 때 데이터를 처리하는 부분이다

클라이언트 사이드에서 form(특정 url에 데이터를 전송해서 처리하는 요청)을 처리하기 위해 react router는 Form을 사용한다.
form을 사용하면 서버에 요청을 보내고,Form을 사용하면 클라이언트측에 요청을 보낸다.
클라이언트 측에서 요청을 받았다면 이는 action에서 처리하는데 POST 요청 시 호출된다.
formData()를 사용하면 action함수에 전달된 데이터를 받을 수 있다.

fetcher

url을 변경하지 않고 요청한 url에 데이터를 요청한다
데이터를 navigate하지 않고 데이터를 변화 시킬때 사용
즉 공통 컴포넌트가 있거나 같은 페이지에서 여러번 사용되는 컴포넌트가 있을 경우, 배후에서 데이터만 업데이트하거나 받으려고할 때 유용하다.
navigate하지 않고 Form을 이용해 loder, action과 커뮤니케이션 할 수 있다느 것이 form과의 가장 큰 차이점