1. 문제
컴포넌트를 분리하고 커스텀 훅과 유틸 함수를 도입하면서 props 개수가 많아졌다. 그 결과 가독성이 떨어지고, 테스트 코드에서도 반복적으로 많은 props를 일일이 넘겨줘야 하는 번거로움이 생겼다.
2. 시도
관련된 로직끼리 묶어서 부모 컴포넌트에 상태와 함수를 모은 뒤, 하위 컴포넌트에 props로 전달하는 구조를 유지했다. 동시에 기능별 책임을 커스텀 훅과 유틸 함수로 분리하면서 구조를 조금 더 깔끔하게 만들려고 했다.
3. 해결
모든 상태와 함수를 직접 props로 넘기는 대신, 일부 컴포넌트를 더 세분화하거나 공통 로직을 커스텀 훅으로 옮겨서 복잡도를 줄이려고 했다. 시간이 허락하는 범위 내에서 테스트 코드도 새로운 구조에 맞게 수정했다.
4. 알게된 것
props 전달만으로 구조를 유지하는 데에는 한계가 있다는 걸 느꼈고, 상태와 로직 관리를 더 유연하게 할 수 있는 방법(Context나 Provider 패턴 등)이 필요하다는 걸 알게 됐다.
기능 구현과 테스트 사이에서 균형을 잡는 게 쉽지 않다는 걸 체감했고, 테스트를 고려한 컴포넌트 구조 설계가 얼마나 중요한지 새삼 느꼈다.
Keep : 현재 만족하고 계속 유지할 부분
- 기능을 추가하기 전에 구조와 책임 분리를 먼저 고민한 점
- 테스트 코드 작성에 대한 부담감을 줄이고 직접 작성해본 경험
- 멘토링에서 받은 피드백을 토대로 개선 방향을 찾아 적용한 점
Problem : 개선이 필요하다고 생각하는 문제점
P1. props가 많아지면서 컴포넌트 간 결합도가 높아졌고, 테스트 코드에서도 많은 데이터를 반복적으로 넘겨줘야 해서 유지보수가 번거로워졌다.
Try : 문제점을 해결하기 위해 시도해야 할 것
P1. 관련 props를 묶어 객체로 전달하거나, 상태 관리를 Context로 위임해서 구조를 간결하게 만들고 싶다.
또한 props drilling을 줄일 수 있는 구조나 패턴(Context API, Presenter-Container 패턴 등)을 더 학습하고 적용해보면 좋을 것 같다.
