[메가테라] 프론트엔드 생존코스 7주차 주간회고

사실 (Fact)

7주 차 강의는 React에서의 라우팅 처리에 대해 학습했다.

window.location.pathname을 이용하여 직접 URL에 따라 다른 컴포넌트를 보여줄 수 있지만, 추상화가 이미 되어있는 react-router-dom을 사용했다.

react-router-dom 버전 6.4부터는 라우터 객체를 지원하여 라우팅 정보만 별도의 파일로 관리할 수 있다.

테스트 코드에서는 memoryRouter, createMemoryRouter를 이용한다.

바닐라 자바스크립트로 SPA를 구현할 때는 URL만 변경시키기 위해 history.pushState를 활용하는데 이 동작은 Link 컴포넌트로 추상화가 되어있다.

NavLink, useNavigate, Navigate 등을 추가로 학습했다.

 

느낌 (Feeling)

라우팅 처리는 리액트로 개발을 해봤으면 다들 당연하게 해봤을 것, spa의 개념과 실제 내부 동작이 어떻게 구현되어 있을지 한번 확인하고 가는 느낌이 좋았다.

추가로 useParams, useLocation, lazy loading도 살펴보면 좋을 것 같다.

react-router-dom에서 lazy를 사용하는 것은 lazy loading의 책임을 page component에 대해서는 라우터에 두는 것 같기도 하다.

 

교훈 (Finding)

체력이 많이 빠지고 지치니 자리에 오래 앉아 있기가 힘들다.

컨디션에 신경쓸것, 공부는 긴 싸움이다.