컴포넌트는 왜 분리할까?
- 반복되서 사용된다면 재사용을 위해 분리
- 내용이 너무 많아져서 가독성이 떨어지거나 코드의 응집성을 위해 분리한다.
- 불필요한 리렌더링을 막기 위해 state가 꼭 필요한 곳에 있도록 분리한다.
01. React Router 학습
01. React Router
React Router란?02.정적 라우팅
- 애플리케이션의 각 페이지를
Route컴포넌트를 사용해서 설정한다. - 정적 라우팅은 URL 경로가 변경되었을 때 해당하는 컴포넌트를 렌더링한다.
03. 동적 라우팅
Route컴포넌트의pathprops:을 사용하여 변수를 포함시키면(예::id) 동적 라우팅을 구현할 수 있다.useParams,useLocation훅을 사용하여 URL 파라미터나 쿼리에 접근할 수 있다.
04. React Router V6 실습
App.jsx의 코드인데 위와같이 RouterProvider를 가져와서 리턴을 해주자 그럼 router를 props로 줘야하는데 router는 어디 어떻게 생겼냐?
이렇게 생겼음.
하지만 위는 좀 변형된거고 기본적인 틀은 아래와같다.
const router = createBrowserRouter([
path : '/'
element : <component />
])근데 경로가 children 안에 있고 밖에는 없네?
element엔 layout component밖에 없네?
왤까?
Layout을 제작하여 각각의 페이지마다 선언해주어 감쌋다고 가정해보자.
그렇다면 화면이 렌더링 될 때마다 레이아웃이 리렌더링 될텐데 그 때 해당 레이아웃이 선언된 모든 컴포넌트의 레이아웃이 호출되게된다.
이를 해결하기 위해 라우터 6버전에는 위와같은 children개념을 도입하였다.
해당 path에 들어가게되면 element의 값인 DefaultLayout으로 감싸진 해당 컴포넌트가 화면에 렌더링? 마운트? 되게 된다.
근데 기존엔 들어가기만 하면 됬는데 이젠 어떻게 이를 출력해주나?
이를 사용하기 위해선 아래와같이 DefaultLayout 파일에서 링크들을 리턴해주고 outlet을 import해와 아래와 같이 사용해주어 children 부분의 element를 뽑아내야한다.
여기서 문제 레이아웃은 왜 짜야되나? 위 사진에 이유가 있다.
쨋든 각설하고 어떤 값을 렌더링할 때 실행하려면 useEffect에서 실행을 해야 했었다 실제로도 그러했고
그렇다면 웹페이지를 로딩할 때 빈 화면이 출력되고 레이아웃이 후에 그려지는 layout shift현상이 있게되는데 이를 라우터측에서 해결할 수 있는 기능이 router측에서 children들에게 loader에게 작업할 일감을 주는 것이다.
자세한 설명은 위 router 사진에서 보여진다.
loader에게 일감을 주면 어떤 데이터들을 담고있는 객체를 리턴해 주는데 그를 사용하면 된다.
예시는 아래와 같다.
useParam()??? 아몰라 로더 써버려~라고 생각은 하고 있는데 언제 또 쓸지는 모르는 거니 알아놓자면 라우터에서 param으로 들어오는 값을 받아다 쓸 수 있게 리턴해준다고 간단하게 알고만 있어보자.
필요하면 그 때 자세히 공부하면 되겠지 ㅇㅇ...
본인만 알아먹을 수 있게 적당히 정리해서 좀 이상하긴한데 이만 마치겠음.
폴더 구조는 아래와 같음
