User.js 라는 페이지를 제작 한 후, user 페이지에 Usermain 컴포넌트를 작성해주었다. Usermain에는 UserBoard, Navmenu 컴포넌트를 작성하여 유저 보드와 메뉴를 분리해서 작업하였다.
UserBoard에는 유저의 정보를 서버에서 받아와 수정 및 업데이트 해줄 수 있어야 하기 때문에 이외에 더이상의 기능을 추가하는것은 불필요하다고 생각하였다.
Navmenu 에는 각각의 버튼에 맞는 컴포넌트로 이동하게 Link를 작성해주었다.
또한 각 버튼에 맞는 내용은 side와 body로 컴포넌트를 나누어 제작하였는데 이는 각각 관리해야 하는 데이터가 다르기 때문이다.
컴포넌트가 늘어날수록 '컴포넌트가 과다하게 많지는 않을까?' 라는 걱정이 들긴 하였지만 SRP(단일책임원칙)을 생각하여 진행하였다.
단일 책임 원칙 (SRP, Single Responsibility Principle)
모든 함수/모듈/컴포넌트는 정확히 한 가지 작업을 수행해야 한다.컴포넌트가 한 가지 작업을 수행하기 위해서는?
1. 너무 많은 작업을 수행하는 큰 컴포넌트를 더 작은 컴포넌트로 나눕니다.
2. 주요 컴포넌트 기능과 관련 없는 코드를 별도의 유틸리티 함수로 추출
3. 연결된 기능을 커스텀 훅으로 캡슐화
프런트엔드 개발자