React Router의 loader, 데이터는 어디서 오는가
웹 페이지를 보여주기 전에 필요한 데이터를 미리 준비하는 아주 편리한 방법이 있다.
React Router에서는 이 역할을 loader라는 함수에게 맡기는 것이다.
loader는 우리가 설정한 각 라우트(경로)에 붙어있는 '데이터 준비 담당자'와 같다.
사용자가 특정 페이지로 이동하면, 그 페이지가 화면에 그려지기 전에 담당 loader가 먼저 실행되어 데이터를 가져온다.
이렇게 미리 준비된 데이터 덕분에 우리는 로딩으로 인한 화면 깜빡임 없이 쾌적한 사용자 경험을 만들 수 있다.
loader가 준비한 데이터를, 실제로 화면에 그리는 여러 하위 컴포넌트들은 해당 데이터를 어떻게 사용할 수 있는지 알아볼 것이다.
useLoaderData(), useRouteLoaderData()
useLoaderData()
- 내(현재) 라우트의
loader데이터를 사용 - 인자가 필요 없다.
- 주로 페이지 고유의 데이터에 사용 (예: 게시글 내용)
useRouteLoaderData(id)
- 부모(상위) 라우트의
loader데이터를 사용 id를 인자로 전달해야 한다.- 주로 여러 페이지가 공유하는 데이터에 사용 (예: 로그인 사용자 정보)
useLoaderData는 '나의 데이터',useRouteLoaderData는 '부모의 공유 데이터'를 꺼낼 때 사용한다.
1. 사용자가 /login 페이지에 있을 때
- 경로:
rootLayout→authLayout→/login - 실행되는
loader:root의loader,auth의loader
이 페이지(LoginPage.jsx) 안에서는 다음과 같이 데이터를 사용할 수 있다.
useLoaderData()를 쓰면,/login경로 자체에 설정된loader의 값을 가져온다.useRouteLoaderData('auth')를 쓰면, 바로 위 부모인authLayout의loader값을 가져올 수 있다.useRouteLoaderData('root')를 쓰면, 가장 위 조상인rootLayout의loader값을 가져올 수 있다.publicLayout의loader값은 사용할 수 없다. (auth와public은 서로 남남인 '형제' 관계이기 때문)
2. 사용자가 /main 페이지에 있을 때
- 경로:
rootLayout→authLayout→protectLayout→/main - 실행되는
loader:root의loader,auth의loader
이 페이지(MainPage.jsx) 안에서는 다음과 같이 데이터를 사용할 수 있다.
useLoaderData()를 쓰면,/main경로 자체의loader값을 가져온다.useRouteLoaderData('auth')를 쓰면, 조상인authLayout의loader값을 가져올 수 있다. (로그인 정보를 여기서 얻는다.)useRouteLoaderData('root')를 쓰면, 가장 위 조상인rootLayout의loader값을 가져올 수 있다.- 역시
publicLayout의loader값은 사용할 수 없습니다.
3. 사용자가 /about 페이지에 있을 때
- 경로:
rootLayout→publicLayout→/about - 실행되는
loader:root의loader,public의loader
이 페이지(AboutPage.jsx) 안에서는 다음과 같이 데이터를 사용할 수 있다.
useLoaderData()를 쓰면,/about경로 자체의loader값을 가져온다.useRouteLoaderData('public')를 쓰면, 바로 위 부모인publicLayout의loader값을 가져올 수 있다.useRouteLoaderData('root')를 쓰면, 가장 위 조상인rootLayout의loader값을 가져올 수 있다.- 반대로,
authLayout의loader값은 절대 사용할 수 없다. (/about페이지는authLayout을 전혀 거치지 않았기 때문)
내가 있는 페이지는 '나 자신'과 '내가 거쳐온 길(부모, 조상)'의 데이터만 사용할 수 있다.
Web Developer