프로젝트 마무리는 어디로...

원래 진작에 리팩토링이 다 끝났어야 했을 터다.

 

팀원들을 기다리는 사이 내 파트에 대한 리팩토링은 1차적으로 이미 끝낸 상태지만, 프로젝트 전체 컴포넌트에 대한 리팩토링은 아직 이루어지지 않은 상태.

 

이젠 기한이 진짜 얼마 남지 않아 내일부터는 어쩔 수 없이 혼자서라도 컴포넌트 다 쪼개는 작업을 들어가야 한다.

 

---

이번 주 한 작업

• 달력 로직 메모라이징 작업 및 렌더링 최적화
• 자주 쓰이는 함수에 대한 리팩토링
• input 컴포넌트화
• 프로젝트 오류 수정
• 유저 테스트 피드백 반영

 

---

트러블 슈팅

- useMemo, useCallback, React.memo -

 

최적화를 위해 공부하는 과정에서 위의 훅들을 너무 무분별하게 쓰고 있었다는 것을 깨닫고 공부하기 시작함.

어떨 때 사용해야하고 어떻게 써야 적절하게 사용하는 건지 공부 전에는 막연하기만 했었는데, 하다보니 아직 완벽하게 알았다고는 못 하겠지만, 감은 잡히고 있는 상태다.

 

useMemo - 의존성 배열이 바뀌지 않은 한 계산된 값을 재사용.

useCallback - 의존성 배열이 바뀌지 않은 한 함수를 새로 만들지 않고 재사용

 

props가 바뀐다 거나 상태값의 변화 등으로 인해 렌더링이 일어나면 다시금 코드들이 순서대로 읽히는데 그 과정을 생략해주는 개념들이었다.

실제로 제대로 적용이 되면 안에 콘솔이 있어도 읽히지 않는다.

 

그리고 추가로 useState 훅을 사용할 때 setState에 특정값을 직접 넣지 않고, 함수형 업데이트를 사용할 수 있는 경우, 그렇게 해주면 의존성 배열에서 그 값을 빼줄 수 있게되고, 따라서 렌더링을 막을 수 있게 된다.

 

다음으로,

 

React.memo - 불필요한 렌더링을 막아준다.

 

사실 아직 정확히 어떤 조건에서 써야하는 건지 헷갈리는 부분이다.

그래서 아직은 React DevTools이라는 확장 프로그램을 이용해 React.memo를 적용해서 렌더링이 안 일어나면 적용하고, 적용해봐도 렌더링이 일어나는 것들엔 적용하지 않는 방식으로 작업을 하고 있는데, 좀 더 파고들어가 볼 필요가 있을 것 같다.