데이터 변경의 핵심: Action과 데이터 관리 전략
loader가 데이터를 가져오는(Read) 역할이었다면,action은 데이터를 보내고 조작하는(Create, Update, Delete) 핵심 도구임
키워드: action, useLoaderData, useRouteLoaderData, throw json(), useRouteError
1. loader(): 화면이 뜨기 전에 데이터를 가져온다
기본 리액트 방식(useEffect)은 컴포넌트가 렌더링된 후에 데이터를 가져오지만, loader는 페이지 이동이 완료되기 전에 데이터를 미리 가져옵니다.
❖ 장점 및 특징:
- UX 향상: 빈 화면이나 로딩 스피너를 보는 시간을 줄이고, 완성된 페이지를 바로 보여줍니다.
- 자동 처리:
loader가response객체를 그대로 리턴하면, 리액트 라우터가 내부적으로.json()처리를 수행해줍니다.
2. useLoaderData & useRouteLoaderData
가져온 데이터를 컴포넌트에서 꺼내 쓰는 방법입니다.
useLoaderData: 현재 라우트에 설정된loader데이터를 직접 가져옵니다.useRouteLoaderData: 부모 라우트의 데이터를 공유받을 때 사용합니다. 라우트 설정에id를 부여하고, 그id를 열쇠 삼아 자식 페이지(상세, 수정 등)들이 데이터를 공유합니다.
3. 동적 라우트와 파라미터 (params)
URL에 :eventId와 같은 변수가 포함된 경우, loader 함수는 자동으로 params 객체를 인자로 받습니다.
❖ 차이점:
- 컴포넌트 외부에서 실행되므로
useParams훅을 사용할 수 없습니다. - 대신
loader({ params })형태를 활용하여 어떤 데이터를 가져올지 API 주소를 동적으로 생성합니다.
4. throw json()을 이용한 우아한 에러 처리
데이터 로딩 중 404나 500 에러가 발생하면 리액트 라우터의 방식으로 에러를 "던집니다(throw)".
json()유틸리티:JSON.stringify를 직접 쓸 필요 없이 객체와 상태 코드를 한 번에 던질 수 있게 해줍니다.useRouteError: 던져진 에러는 공통ErrorPage에서 이 훅으로 낚아채서 상황에 맞는 메시지(404: 페이지 없음, 500: 서버 에러 등)를 보여줍니다.
5. 데이터 재사용을 위한 중첩 라우트 설계
동일한 데이터가 필요한 여러 페이지(상세 보기, 수정 페이지)를 하나의 부모 라우트로 묶어 관리합니다.
❖ 최적화 원리:
- 부모 라우트에
id와loader를 설정합니다. - 하위의 모든 자식들은 추가적인 API 호출 없이 부모의 데이터를 재사용할 수 있어 성능과 유지보수에 매우 유리합니다.
### Action 작동 프로세스 (CUD)
- 양식 제출: 사용자가
<Form>을 제출하면 브라우저의 기본 동작을 막고 라우터의action이 가동됨.- 데이터 처리:
action함수가request객체에서 폼 데이터를 뽑아내 서버로POST/PATCH/DELETE요청을 보냄.- 자동 갱신: 서버 작업이 끝나면 리액트 라우터가 현재 페이지의
loader를 다시 실행하여 화면을 최신 상태로 업데이트함.- 이동: 작업 완료 후
redirect()를 통해 목록 페이지 등으로 사용자를 안내함.
요약 및 결론
리액트 라우터의 loader와 action을 활용하면 컴포넌트 내부 로직이 획기적으로 줄어듭니다.
"읽기는 loader, 쓰기는 action". 이 두 축을 중심으로 라우트를 설계하면 데이터의 흐름이 명확해지고 앱의 반응 속도가 비약적으로 향상됩니다.
열심히 기록할 예정🙃