🐜 Mine 애플리케이션 프로젝트 - 상단 탭

홈 화면을 만들고 나서 그 다음 단계로 조금 더 쉬워보이는 '예산 화면을 만들어보자' 였습니다.
처음에는 예산 화면과 달력 화면 이렇게 단순하게 각 페이지라고만 생각하였습니다. 그림을 자세히 보니 공통되는 부분이 보였고, 코드숨에서 그동안 리액트로 관심사 분리를 했었는데, 관심사 분리를 하고 공통되는 컴포넌트를 재사용하면 좋을 것 같다는 생각을 하였습니다.

예산 화면은 <상단 탭 /> + <예산 /> + <하단 탭 />으로 이루어져 있다는 결론을 내리고, 컴포넌트 네이밍에 대한 고민을 수도 없이 했었습니다.

상단 탭인데 무엇이라고 해야 적절할까?
처음에 MonthlyBudgetContainer라고 생각해냈습니다.
직관적으로 네이밍을 했는데 먼가 마음에 썩 들지는 않았습니다.
보통 앱 화면에서 상단 탭, 상태 바, 네비게이션 바 등등 쓰는 용어가 있지 않을까 하고 구글링을 하면서 고민 끝에 StateBarCard라고 네이밍을 하였습니다.

컴포넌트 네이밍 한 번 정하기도 힘이 드네요!

이제 본격적으로 StateBarCard 컴포넌트를 만들어 보도록 하겠습니다.

 

export default function StateBarCard() {
  return (
    <>
    // Todo...
    </>
  );
}

 

여기서 또 관심사 분리를 할 수 있겠네요.

• 월 이동하는 컴포넌트
  
• 수입과 지출 거래내역을 보여주는 컴포넌트
  

아래와 같이 컨테이너 컴포넌트로 각각 관심사 분리를 해주었습니다.

 

export default function StateBarCard() {
  return (
    <>
      <MonthSwiperContainer />
      <BreakDownContainer />
    </>
  );
}

 

🙋 왜 컨테이너 컴포넌트를 사용했나요?

 

컨테이너 컴포넌트와 프레젠테이션 컴포넌트에 대해 알고 계신가요?
Presentational컴포넌트와 Container컴포넌트 편

 

이제부터 본격적인 기능 개발이 필요한 부분들이예요.

각각의 상태와 동작(액션)이 필요한 부분입니다.
저는 이번 프로젝트에서 대부분의 상태와 동작을 리덕스를 사용하려고 하기 때문에 이부분에서 데이터 처리 능력을 하는 컴포넌트로 만들예정이라서 컨테이너 컴포넌트라고 네이밍을 했습니다.

📝 Requirements

✔️ 리덕스에 정의해야 할 데이터 스키마

• 월 이동하는 컴포넌트
  year, month
• 수입과 지출 거래내역을 보여주는 컴포넌트
  income, expense