컴포넌트 모듈화 - Router 컴포넌트 모듈화부터

내겐 참 어려웠던 부분이 모듈화였다. 개념적으로는 이해할 수 있지만 코드에는 적용하기 쉽지 않았던 내용들.

모듈화. 코드를 분리하는 것.

 한 예시로, MVC 등, 데이터와 뷰 컨트롤등 기능을 분리하는 책을 봤을 때 '이렇게 분리한 뒤 사용하는 거군!' 하는 멋진 느낌만 받고 App, index 를 어떻게 활용해야 할지 잘 몰랐던 것 같다. App 컴포넌트가 필요하지 않은 경우에는 삭제하고 대체할 수 없는걸까? 하는 생각도 해보고. 그런 고민을 하고 있었는데, 때마침 Router 컴포넌트를 따로 모듈화 하는 과정에서 관련 내용들을 찾아봤다.

 

 

문제가 발생한 부분은 react-router-dom이었다.

정확히 말하자면, 내가 router 폴더를 만들고, Router 컴포넌트를 따로 분리해서 라우팅 컴포넌트를 만들었을때 문제가 생겼다.

Router 컴포넌트를 만들었는데, '적용되는 부분이 어디지? 그냥 컴포넌트만 만들었을 때 적용되는 마법같은 일은 벌어지지 않는데.. 라우팅도 제대로 되지 않고 뭐가 문제일까'하고 생각했는데..

 

일단 문제를 파악하기 위해 App과 index 파일은 어떤 역할을 하는지 알아봐야 했다.

1. CRA로 프로젝트를 만들게 되면 처음 랜더되는 부분이 App 파일이다. 그러면 App 파일은 어디서 랜더링 되는 걸까?

2. index 파일을 보면, 랜더링하는 부분이 나온다. 여기서 App 컴포넌트를 랜더하게 되는 것.

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
	<App />
);

3. 그러면 여기서 궁금한 부분을 순서대로 적어보면,

 (1) 랜더링 되는 컴포넌트(App)와 따로 분리한 라우팅 컴포넌트(<Router/>)는 어떻게 연결이 되는거지?

 (2) 라우팅 컴포넌트를 만들면... 일단 라우팅은 해놓은 거니까... App에서... url을 /main, /info 등으로 ... 해놓으면...  어떻게든... 되는건가..?

결론적으로 틀렸다. index파일에서 root.render()부분에 Router 컴포넌트를 포함해야 한다.

 

돌이켜보면, 책에서 예제들을 따라해봤을 때와 Router 컴포넌트를 만드는 것의 차이점은 단순히 컴포넌트를 분리하는 것이다.

 

App 컴포넌트에서 라우팅을 하는 예제를 많이 보면서, 저절로 라우팅이 되는건가 하고 생각했던 것 같다.

 기본적으로 index파일에서 root.render(<App/>) 을 통해 App컴포넌트를 랜더링하게 되니까 App 컴포넌트에서 작성한 라우팅 관련 코드들이 실행이 되는 순서였으니까.

 

여기서는 코드를 <App /> 대신 구성해놓은 <Router /> 컴포넌트를 넣어주면 된다.

root.render(<Router />);

또는

createBrowserRouter

를 사용해서 라우터 컴포넌트를 만든 경우, 프로바이더로 해결할 수 있다.

root.render(<RouterProvider router={Router} />);

 

모듈화를 하면서 React의 SPA 랜더링 개념에 관심을 갖게 됐고, 책을 한번 더 읽어보고 .. 내가 모듈화를 어려워했던 이유들을 다시 짚어보게 됐는데 다음 3개에서 모듈화 관련된 부분을 또 생각해보게 됐다.

1. 커스텀 훅

2. 리듀서

3. ContextAPI

 

1은 잘 해보진 않았다. 2는 코드 암기는 다 했는데 쓰이는 이유를 잘 몰랐다.

그런데 이번에 팀으로 코드리뷰를 진행하면서, 1과 2의 효용성에 대한 이유를 발견할 수 있었다.

1과 2가 거의 비슷한 이유인데, 모듈화를 하게 되면 코드가 짧아진다. 그런데 이건 거의 결론에 가깝고

useState를 너무 많이 사용하게 되는 경우에 쓰이게 되는 것 같다. 그리고 모듈화를 통해 state를 관리할 수 있고, 아마도 전역적으로 초기화, 관리등을 할 수 있다는 점 등 이점이 있는 것 같다. 

3의 경우는, 처음 본 예제가 너무 어려웠다... 그렇지만 팀프로젝트를 하면서 Provider를 꽤 많이 들어서 익숙해진 부분도 있었던 것 같고, contextAPI 관련된 이고잉님의 생활코딩 강의를 보면서 쉽게 이해할 수 있었다.

 

그러면 어떻게 연습해볼 수 있을까

 

처음에 코드에 익숙해지기 위해서는 모듈화를 하지 않고, 한 파일에 우르르 적어본다.

우르르 적어보고, 하나의 파일을 완성했을 때 모듈화가 가능한 부분을 파일로 만들고, import 하는 연습을 하면 조금은 책에서 의도한 내용들을 더 마음 편하게 받아들일 수 있다.