코드 리팩토링의 방향성

서론

Til 쓰기 프로젝트 3일차
개발자 친구에게 코드를 보여주고 어떤 평가를 들었냐면
1. "백 일 부트캠프 한 것 치고 구현은 어떻게든 하는 것 같은데 코드 가독성이 너무 별로다"
2. "리액트 배운지 좀 됐는데 성능 최적화는 전혀 신경 안쓴 것 같다"

(악평 위주로 해달라고 부탁했다)

그래서 코드 리팩토링에 대한 방향성을 조금 알려달라고 부탁했더니
키워드를 몇개 던져주었다.

본론

1. 컴포넌트 분리

컴포넌트를 작은 조각으로 나누거나 혹은 같은 역할을 하는 컴포넌트들을 묶어서 관리한다.
컴포넌트를 분리하는 기준은 다음과 같다.

1. 코드의 중복을 줄일 수 있는 공통된 컴포넌트인가 ?
2. 유지보수에 용이한가 ?
3. 비즈니스 로직과 분리되어 있는가 ?
4. 찾고 싶은 로직을 빠르게 찾을 수 있는가 ?

React 컴포넌트 분리와 폴더 구조화

2. 중복 제거

중복된 코드나 함수를 컴포넌트 혹은 커스텀 훅으로 만들던가,
유틸함수로 빼서 관리한다.

예를들자면,
현재 진행중인 프로젝트에서 이미지 Url을 Blob 객체로 convert 하는 로직이 있는데,
프로필 이미지 변환에서도 사용되고 회원가입에도 사용된다.
이러한 함수는 유틸함수로 관리하는 것이 바람직하다.

리액트를 어떻게 설계할 것인가 ?

3. 상태 관리

관리되고 있는 상태의 의존성을 줄인다.
필요하다면 전역 상태관리 라이브러리를 사용하여 관리한다.

useReducer 같은 훅도 사용해보라고 추천해줬는데
한번 연습해보면 좋을 것 같다.

4. 성능 최적화

useMemo, useCallback, React.memo 과 같은 메모이제이션 훅을 사용해서
필요한 부분은 성능 최적화를 고려해본다.

useMemo는 연산된 값을,
useCallback은 실행한 함수를,
React.memo는 컴포넌트를
메모이제이션 하여 재렌더링을 방지한다.
다만, 해당 훅이 적용된 데이터가 변경되면 재렌더링이 일어나는데
모든 코드를 메모이제이션 하면 데이터 변경 비교 연산에 대한 리소스가 늘어나게 되므로
적재적소에 적용하는 것이 좋다.

결론

혼나고 나니까 조금 후련해졌다.