[react] 리액트 졸업 과제 리팩토링기

dolfin·2023년 6월 26일

React

목록 보기

10/13

노마드 리액트 마스터 클래스 과정 졸업 과제로 영화 앱 사이트를 제작하게 되었다.

TA분들의 조언을 따라 몇가지 수정할 부분이 생겨 블로그에 기록을 남겨본다.

다른 라우트, 비슷한 로직

해당 사이트는 크게 총 3가지의 페이지로 나뉘는데 데이터만 다르고 로직이 동일하다.
처음 만들때도 이거 너무 똑같은 코드 아닌가 싶었는데.. 역시나 얘기를 하셨다.

수정 전

세개의 컴포넌트를 컴포넌트 이름과 fetching 함수 이름만 다르고 다 똑같이 짰다..ㅎㅎ

수정 후

문제의 공통 코드들의 하나의 컴포넌트로 만들어주었다.

수정 후 1줄만 남게 되었따 클-린

미흡한 컴포넌트 분리

수정 전

수정 후

마찬가지로 반복되는 태그들을 하나의 컴포넌트로 분리하였다.
이 부분은 정말 처음 코드 짤때는 생각도 못했는데.. 과거의 나야 왜 이렇게 짰니 싶은 부분..
그동안 기능구현, UI 구현하는 것에만 너무 초점을 맞춘 탓에 컴포넌트를 분리하는게 진짜 부족했다.

뷰와 비즈니스 분리

과제 시안에는 없던 부분인데 헤더 아래에 배너 케러셀을 추가 했다.
배너 안에서 네트워크 통신과 배너의 역할인 프레젠터 두가지 역할을 모두 하고 있다보니
컴포넌트가 무거운것 같다는 말을 해주셨다.

잊지 말아야할 포인트 단일 책임 원칙(SRP) : 하나의 컴포넌트는 한 가지 일을 하는게 이상적이다.

위에서도 사용하였지만 커스텀 hook을 따로 제작하여 데이터 통신을 따로 전담해주었다.

왜 컴포넌트 분리가 필요할까?

세가지로 나뉘었지만 사실상 모두 컴포넌트 분리가 미흡했다.
복잡한 컴포넌트는 재사용이 어렵고, 가독성과 유지보수를 어렵게 만든다.
심지어 작성한 나 조차도 다시 볼때는 어려움을 느끼게 한다.

정리

리팩토링을 진행하면서 어떻게 하면 좋은 컴포넌트를 짤 수 있는지 고민을 많이 하게 되었다.
(사실 아직도 어렵다..)
그동안 어떻게 해서든 우선 기능구현이라도 하자..!! 하는 생각만 가지고 코드를 짜왔다.
작은 프로젝트여서 리팩토링 과정이 엄청 험난하지 않았지만, 추후 더 큰 프로젝트들을 할 걸 감안하면
컴포넌트 설계에 대한 공부와 고민이 많이 필요한 시점인 것 같다.