오늘도 코딩하나

강의 내용: 강의 링크#5.11 ~ #6.4 1️⃣ nested router props 처리react-router-dom v5에서는 prop를 직접 전달할 수 있지만,react-router-dom v6에서는 prop를 직접 전달할 수 없으므로,Outlet을 사용해 자식 컴포넌트가 부모의 데이터를 공유할 수 있도록 한다.    ( 이유에 대한 자세한 설명은 nested Routes 설명 참고 👉 설명보러가기 )// Coin.tsx// Chart.tsxinterface IOutletProps { coinId: string;}function Chart() { const { coinId } = useOutletContext();}   📌 Outlet에서 context를 설정하면 자식 컴포넌트에서 useO..

강의 내용: 강의 링크 #5.0 ~ #5.11  🚨 React Router v5 → v6에 대한 모든 변경점에 대한 정리가 아닌       #5 강의를 수강하면서 나온 내용들에 한해서 정리된 내용입니다.✅ react-router-dom v6   1️⃣ Link to    ▷ v5 버전 {coin.name} →     ▷ v6 버전 {coin.name} →   2️⃣ nested Routes  - Coin.tsx    ▷ v5 버전      ▷ v6 버전  - Router.tsx }> } /> } />    - Coin.tsx   3️⃣ react-query      이전에는 react..

강의 내용: 강의 링크 #5.0 ~ #5.11 ✅ 페이지간 데이터 전달 기능     ➰ useLocation 현재 URL 정보를 가져오는 hookpathname, search, hash, state, key 등의 정보 제공 {coin.name} →const { state } = useLocation(); {state?.name ? state.name : loading ? "Loading..." : infoData?.name}useLocation().state를 사용하면 URL에 보이지 않는 방식으로 데이터를 전달할 수 있음⇒ 비하인드더씬/${coin.id} 페이지로 이동하면서 state 값을 함께 전달useLocation().state에서 전달된 값을 받아서 사용 ✅ 중첩 라우트 ..