TIL - 20220606

 오늘은 코드숨 리액트 과정의 6주차로 라우팅에 대해 공부했다. 과거 코드숨 과정을 진행하기 전 리액트를 독학으로 공부할 때, react-router-dom을 잘못 사용해서 한 페이지에서 다른 페이지로 바뀔 때 바뀐 부분만 렌더링하는 리액트의 장점을 활용하지 못하는 것 같다는 생각을 한 적이 있어 6주차의 라우팅이 기대되는 수업들 중 하나였다. 먼저 이 고민에 대한 답은 react-router-dom switch 밖으로 빼줘야하는 것이었다. 예를 들어, 우리가 사용하는 홈페이지들 중 중복해서 사용하는 헤더 부분은 switch 밖으로 빼고 여러 페이지들의 라우팅은 switch 안에 route를 이용하여 처리해주어야 하는 것이다.

이런 식으로!

또한, 위 이미지와 같이 App 컴포넌트에서 사용하는 BrowserRouter를 빼줄 수도 있다는 사실을 이번 주 강의에서 배우게 됐다.

요렇게!

위 이미지처럼 index를 BrowserRouter로 감싸준다면 첫 번째 이미지에서 BrowserRouter를 지워도 정상 작동한다! 이 방법은 취향 차이라고 생각하면서도 App 컴포넌트에서 BrowserRouter 태그를 지운다면 App의 indent를 하나 줄일 수도 있고 index에서 reducer의 store와 같은 핵심 기능들이 있으니 핵심 기능들을 index 한 곳에서 간편하게 볼 수도 있으니깐 index에서 감싸주는게 더 좋은 방법이라고 생각한다. 앞으로는 BrowserRouter를 index에서 사용해야겠다.