프로젝트 회고 - 02. Pitchplay

프론트엔드를 위주로 작성했던 프로젝트로, Pitchplay를 회고하면서 프론트엔드에서 고쳤으면 좋았을 법한 것들에 대하여 작성해보려고 한다. 

 

- component, container, page 

프로젝트를 시작하면서 component, container, page로 나눠서 파일들을 정리하려고 했다. 프로젝트를 시작하기 전에는 차이점이 이해가 된 것 같았는데, 프로젝트를 진행하면서 component, container, page의 경계가 없어지는 것이 느껴졌다. 프로젝트 회고를 통해서 이 점에 대해서 확실하게 정의하고 가고자 한다. 

• component : UI 요소를 정의, 데이터를 직접 관리하지 않고 props를 통해 데이터를 받음
• container : 상태관리를 정의, 데이터를 props로 전달
• page : 컨테이너와 컴포넌트를 조합하여 하나의 완성된 페이지 구성

즉, page의 경우에는 정말 최종적인 페이지이고 api 호출 및 상태관리의 경우에는 container에서 수행하게 된다. 

 

- Recoil 로 상태관리

redux나 상태관리 라이브러리를 사용하지 않고 커스텀 훅을 사용해서 상태관리(Komofunding 프로젝트)를 했는데, 커스텀 훅 말고 recoil이나 redux와 같은 라이브러리를 사용해서 상태관리 하는 법도 알아야할 것 같다는 생각이 들어 Recoil로 상태관리를 적용했다. Redux의 경우에는 이전에 배우면서 사용해본 적이 있어, 이번에는 Recoil을 통해서 상태관리를 해보았다. 

 

* atom :  상태(state) 정의

* selector :  상태(state)를 기반으로 파생된 데이터를 만드는 곳

 

1. RecoilRoot 적용

function App() {
  return (
    <RecoilRoot>
      <RouterProvider router={router} />
    </RecoilRoot>
  );
}

 

2. isShow 상태관리 ( 모달, 드롭다운 등에서 사용 )