리팩토링 일지: 지식 습득하기

리팩토링 들어가기

기존의 내 코드를 개선하려면, 보다 향상된 지식이 필요하다.

내가 프로젝트를 하며 느꼈던 가장 아쉬웠던 점은 useMemo, useCallback과 같이 성능 향상에 도움을 줄 수 있는 hook을 적극적으로 활용하지 못한 점이다. 참조값을 저장할 수 있는 useRef도 잘 사용하지 못하였다. React hook에 대한 이해도가 낮았기 때문이다.

특히 useMemo, useCallback, useRef는 코드에 녹여낼 수 있을 정도의 지식이 부족했기 때문에 무작정 사용할 수 없었고 코드리뷰를 받은 곳이 아니라면 useState, useEffect 정도만 사용했다.

이에 따라 React 공식문서를 토대로 hook의 목적, 예제를 우선적으로 익히기로 했다.

지식 습득하기

성능향상을 목적으로 코드를 리팩토링하기 위해 React 공식문서의 useMemo, useCallback 부분을 학습했다.

내가 가장 궁금했던 부분은 useMemo와 useCallback을 사용하는 기준이었다. 이 hook들을 무분별하게 사용하면 가독성이 떨어지기 때문이다. 내가 섣불리 코드에 적용할 수 없었던 이유다.

useMemo

공식문서에 따르면 useMemo은 ‘비용이 많이 드는 계산’에 유용한 hook이다. 이를 토대로 내가 리팩토링할 컴포넌트에서 메모화가 유용한 case를 찾아보았다.

useMemo의 계산이 두드러지게 느리고 의존성에 변화가 거의 없는 case

• 사용자에게 입력받는 검색 키워드

  • 사용자의 검색 키워드를 토대로 백엔드에 데이터를 요청하기 때문에 검색 키워드에 변화가 없다면 리렌더링을 건너뛰게 할 수 있다.

• 목적지 리스트의 페이지

  • 페이지네이션이 구현되어 있기 때문에 페이지별로 렌더링되는 item이 다르다. 따라서 페이지가 동일하다면 리렌더링을 건너뛰게 할 수 있다.

console.timeEnd을 이용해 useMemo를 적용하기 전과 후의 로깅 시간(logged time)을 비교할 수 있다고도 한다. 다만, Strict mode와 같은 부차적인 코드 실행 환경을 고려할 필요가 있다.

useCallback

useCallback은 렌더링마다 메모리 주소값이 달라지는 함수를 캐싱할 수 있다. 자식 컴포넌트에 함수를 props down 할 떄, 불필요하게 자식 컴포넌트를 리렌더링하지 않고 함수만 전달할 수 있다.

커스텀 hook에 적용하는 case

• API fetch 함수

  • 부모 컴포넌트에서 커스텀 hook을 만들어 API fetch 함수를 관리할 예정이다. 이 커스텀 hook이 반환하는 함수를 useCallback으로 감쌀 수 있다.

주의할 점

• useMemo의 의존성에 매 렌더링 마다 실행되는 코드(특히 객체 생성)가 참조되고 있지는 않은지 확인하자.

  • 이를 방지하기 위해 렌더링될 때마다 실행되는 코드라인 자체를 useMemo로 메모화할 수 있다.

• useMemo, useCallback을 사용할 때 꼭 이 hook들을 써야하는지 체크하자.

  • useEffect, useState만으로 충분히 불필요한 리렌더링을 줄일 수 있다면, 굳이 사용할 필요가 없다. 컴포넌트가 중첩될 때 JSX를 props로 받도록 코드를 설계하는 방법으로 자식 컴포넌트의 불필요한 리렌더링을 피할 수 있다.

학습 마무리

리팩토링에 필요한 배경지식을 학습을 마무리했다. 예제를 계속 읽어보고 이해하느라 생각보다 시간이 오래걸렸다. 리팩토링하면서도 추가적으로 자료를 찾아보고 공식문서를 반복해서 읽을 예정이다.

완벽하게 마스터하고 넘어가려 하면 리팩토링을 시작조차 못할 것 같으므로.. 직접 코드를 수정하면서 마주치는 어려움을 해결하는 방향으로 우회하였다. 내일은 useRef를 마저 학습한 후 리팩토링을 시작할 계획이다.