페이지에서 전달한 id 값을 섹션/탭에서 받아오기

배경

동적 라우팅에서 받아온 파라미터 id 값이 있고, id 값을 전달해야 하는 두 가지 경우가 있다.
1. 페이지 → 섹션
2. 페이지 → 섹션 → 탭

과정

페이지에서 전달한 id 값을 섹션/탭에서 받아오는 방법은 세 가지가 있다.

1. 프로젝트에서 사용 중인 react-hook-form 라이브러리 이용하기

페이지에서 useForm() 써서 defaultValues나 setValue('id', id)로 id 값 지정하고 섹션/탭에서 watch('id'), getValue('id')로 id 값 읽어오는 방법

2. redux 이용하기

reducer에 id 저장해놓는 함수인 setId() 만들어놓고 페이지에서 setId(id)로 id 저장해놓고 섹션/탭에서 store의 useSelector(=useAppSelector)로 id 값 읽어오는 방법

3. props drilling

페이지부터 섹션/탭까지 속성으로 태워 보내는 방법

결과

💡 props drilling 결정

1. 페이지에서 섹션/탭으로 전달할 값이 id 값밖에 없다.
2. 속성이 타고 내려가는 depth가 깊지 않다. (3depth까진 봐주자!)
3. 리렌더가 발생해도 상관 없다.