[React-Router V6] useOutletContext

useOutletContext 로 상위 컴포넌트에서 선언한 <Outlet/> 에게 context 전달하는 방법을 알아보자

 

우선 간단한 더미데이터 파일을 하나 만든다.

db.ts

 

만든 더미데이터를 갖고와서 링크로 일단 만들어준다.

Header.tsx

 

렌더링 된 화면

 

 

 

 

users/:userId 를 params 로 갖고와서 <User/> 컴포넌트를 렌더링 시켜주고 children로는 <Follwers/> 를 컴포넌트를 렌더링 시켜준다.

 

User.tsx

user 데이터의 이름을 갖고오고<Link> follwer 를 달아준다. 여기서 주의점은 "/followers" 가 아니라 "follwers" 이다 .

/ 를 붙히면 , www.domain.com/  뒤에 바로 붙어서 안되고 , 우리가 원하는건 users/2/follwers 이기때문에 "/" 는 생략 해야한다

 

Outlet 컴포넌트에게 context props 에게 객체형식으로 값을 전달 해준다 . (key 값 userName)

 

 

Follwers.tsx

context로 전달된 userName 을 useOutletContext 함수로 갖고와줘서 그대로 화면에 뿌려주기만 하면된다.

 

 

 

 

Result

 

Outlet 에게 context 전달로 다이나믹한 페이지를 만들수있을거같다.

결론 = Router.tsx 에서 선언된 children 컴포넌트를 렌더링 하기엔 부모컴포넌트에서 <Outlet/> 을 선언 해주고

부모컴포넌트에서 context props로 데이터 전달할땐 useOutletContext() 함수를 이용해서 전달해주면 됨