파일 구조가 깊어질수록 상대 경로가 복잡해지므로 절대 경로를 이용할 수 있도록 설정합니다.
// jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
App.js에 너무 많은 로직들이 있습니다. 적절하게 index.js, App.js, Routes.js로 분리합니다.
App.js의 단순화를 위해 전역으로 사용하는 것들 위주로 분리합니다.
<Provider store={store}>
<Router>
<React.StrictMode>
<App />
</React.StrictMode>
</Router>
</Provider>,
프로젝트가 커질 시 권한 관리 등 다양한 기능을 위해 단순화하고 Route 관련 로직을 분리합니다.
function App() {
return (
<div className={styles.wrapper}>
<Routes />
</div>
)
}
Route 관련 로직을 children 형태가 아닌 component 속성을 이용해 한 줄로 깔끔히 처리 합니다. 라우터 재사용을 위해 상수화 하여 url을 관리합니다.
<Switch location={location}>
<Route exact path={ROUTES.HOME} component={Main} />
<Route path={ROUTES.RESULT} component={Result} />
<Route path={ROUTES.FILTERS} component={Filters} />
</Switch>
함수형 컴포넌트에서 function 함수 표현 대신 화살표 표현을 사용합니다. 간결하고 특히 함수를 전달할 때 효과적이라 화살표 함수 표현을 사용했습니다.
(X) function App() {}
(O) const App = () => {}