1. Design

• 해당 템플릿을 기반으로 작업

Mantis Free - React Admin Dashboard Template

Documentation

2. Development

1) Data

1] React Query

• Server와의 데이터를 Front와 연동시키는 역할
  • Button 등의 이벤트 핸들러에서 API호출과 첫 페이지 로드 시의 데이터를 책임진다
• 서버에서 가져온 데이터 가공은 useMemo를 사용한 캐싱 처리로 불필요한 리랜더링을 줄인다
  • 함수 역시 마찬가지로 useCallback을 사용한 캐싱처리

2] Recoil

• 전역 데이터를 관리하며 값의 변화에 따라 컴포넌트 리랜더링을 위한 사용
• 해당 데이터는 Local Storage를 사용하여 반영구적으로 관리
• 비밀번호 등과 다르게 유저 닉네임, 이메일 등의 되도록 민감하지 않는 데이터 관리

3] Validation

• Formik 라이브러리를 사용한 폼 데이터 관리와 화면에 보여줄 컴포넌트를 정의
• Yup 라이브러리를 사용하여 Formik의 onSubmit 이벤트나 onChange 이벤트 등의 데이터 변화 시 유효한지 검증

2) Page & Component