1. 절대 경로 사용

파일 구조가 깊어질수록 상대 경로가 복잡해지므로 절대 경로를 이용할 수 있도록 설정합니다.

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

2. App.js 분리

App.js에 너무 많은 로직들이 있습니다. 적절하게 index.js, App.js, Routes.js로 분리합니다.

index.js

App.js의 단순화를 위해 전역으로 사용하는 것들 위주로 분리합니다.

<Provider store={store}>
    <Router>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </Router>
  </Provider>,

App.js

프로젝트가 커질 시 권한 관리 등 다양한 기능을 위해 단순화하고 Route 관련 로직을 분리합니다.

function App() {
  return (
    <div className={styles.wrapper}>
      <Routes />
    </div>
  )
}

Routes.js

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>

3. 화살표 함수를 이용한 컴포넌트 사용

함수형 컴포넌트에서 function 함수 표현 대신 화살표 표현을 사용합니다. 간결하고 특히 함수를 전달할 때 효과적이라 화살표 함수 표현을 사용했습니다.

(X) function App() {} 

(O) const App = () => {}