[React] 실무에서 리팩토링으로 리액트 성능 개선 후기

리액트 성능 개선 후기

안녕하세요? 준입니다. 
그간 현생이 너무 바빠 글을 많이 올리지 못 했는데요.
어쩌다 보니 리액트 성능 개선을 한 후기와 제가 고민했던 부분을 적어보려 합니다.
결론부터 말씀드리자면 통합검색 로직 개선을 통해 약 50% 성능 향상이 있었습니다.

먼저 보안 때문에 코드와 많은 사진을 못 보여드리는 점 양해부탁드립니다.

1. 개선

통합검색 페이지는 3가지 섹션으로 구성되어 있습니다.
1. 전계열사 임직원 정보(소속, 담당업무 등), 2. 전자결재, 3. 게시판으로 이루어져 있습니다.
 
에러 픽스 요청으로 게시판과 전자결재에서 '더보기' 버튼 클릭 시 동일한 컨텐츠가 중복 노출되는 문제를 발견하게 되었고,
이를 수정하면서 통합검색 로직이 비효율적으로 동작하는 것을 확인했습니다.
 
통합검색 로직
1. 메인페이지에서 통합검색을 하면 검색할 때 통합검색 api 호출 
2. 통합검색 페이지로 라우팅
3. 통합검색 페이지에서 useEffect를 통해서 동일한 통합검색 api 호출 
 
왜 이렇게 비효율적으로 되어 있나라는 생각에 로직을 좀 더 파보니 
통합검색은 아래처럼 페이지 접근이 가능합니다.
메인 페이지 검색 -> 통합검색 페이지(임직원 정보, 전자결재, 게시판) -> 통합검색 상세페이지(전자결재, 게시판)
 
통합검색 상세페이지에서 뒤로가기를 했을때 통합검색 페이지에서 이전 검색 결과를 다시 보여주려 통합검색 페이지에서 useEffect를 통한 호출을 하는걸 확인하였습니다.
 

 
1번 로직을 삭제하여 검색어만 통합검색 컴포넌트로 넘겨주는 방식으로 했습니다.
다행히 예상되는 부분이 있어 해당 로직 부분 개선은 수월하게 했습니다.
(이 방법이 옳은 방법이라 생각한건 아닙니다. 더 좋은 방법이 있을거라 생각하지만 저 때는 저게 최선이었습니다ㅠ..)
 
개선 후 기존 평균 43점 (10회 측정) 개선 후 67점 (10회 측정)
약 50% 성능 향상이 있었습니다.

2.  고민(?)했던 부분

개인적으로 이번 개선을 통해 제일 고민을 많이 했던 부분은 3가지입니다.

1. 좋은 설계와 유지보수

통합검색 로직을 보면서 개인적으로 로직이 너무 복잡하다라는 생각을 했습니다.
여러 페이지와 컴포넌트를 오가고 Redux 로직 등을 보면서 좋은 설계와 유지보수가 용이한 코드에 대해서 많이 생각했습니다.
주석 한 줄 없는 코드 속에서 한 줄의 주석을 보면서 사막의 오아시스를 느끼며 주석의 중요성을 한 번 더 느끼곤 했습니다.
 

2. useEffect 더 잘 사용하기

리액트 공식 문서에서 useEffect에서는 방대한 로직은 피하라고 되어 있습니다. 
방대한 로직이 포함해야 할 경우 useEffect 여러 개로 나눠 사용하라는 말도 있죠.
 
메인페이지에서 통합검색을 하면 검색할 때 통합검색 api 호출하는게 나을까?
통합검색 페이지에서 useEffect를 통해서 동일한 통합검색 api 호출하는게 나을까?
useEffect에 방대한 로직을 담는게 맞는건가? 방대한 로직을 어떻게 분리하면 좋을까?
등등 

3. 이상적인 코드, 설계와 실무 그리고 리팩토링

많은 개발자, 현업에 계신 분들은 공감하실텐데요.
바로 일정의 압박이죠...
이런 시간의 압박 속에서 이상적인 코드와 설계는 어렵지 않나 라는 생각을 했습니다.
그렇다고 시간을 많이 들인다고 더 좋은 코드와 설계를 할 수 있을까? 하는 생각도 했네요.
 
개인적으로 이상적인 코드와 설계도 중요하지만 그보다 더 중요한건 일정이라고 생각하는 사람 중 한 사람입니다.
그래서 저는 일단 기능 구현, 요구사항 만족을 기간 내에 하고 시간이 남으면 더 나은 코드, 유지보수가 용이하게 수정하는 편인데요.
막상 일정의 압박과 넘치는 업무에서 위처럼 하기란 쉽지 않습니다.
그래서 리팩토링의 중요성을 한 번 더 체감하지 않았나...
 

3. 결론

뭔가 적다보니 제 넋두리인 것 같은데요ㅎㅎ;;;
제가 성능 개선 한 방법 말고도 더 나은 방법, 방향이 있다고 생각합니다.
글을 적다보니 엄청 거창하거나 특별한 방법이 있는게 아니라 쑥스럽긴 합니다ㅎ;;
 
라이트 하우스를 통해 병목지점, 여러 문제 등을 확인하고 해당 로직을 개선 할 수 있는 방법도 있는데
다음엔 라이트 하우스를 이용해 성능개선 할 수 있는 포스팅을 할 수 있었으면 좋겠네요ㅎ
구글에 수 많은 최적화, 성능 개선 방법 중 하나였다고 읽어주시면 좋겠습니다!
 
세줄요약
1. 통합검색 성능 개선 약 50% 향상
2. 로직 개선
3. 방법은 아주 많음!