1. 메모이제이션이 사용된 곳이 하나도 없습니다. 메모이제이션이 무엇이고 왜 해야 할까요?

리액트에서 메모이제이션이란 이전에 계산된 결과를 저장하고 재사용하는 것을 말합니다. 이를 통해 계산을 반복하지 않고 캐시된 결과를 반환해 성능 향상, 즉 최적화를 이룰 수 있습니다.

리액트 컴포넌트는 props가 변경되거나 state가 업데이트될 때마다 다시 렌더링됩니다. 이때, 비용이 많이 드는 연산이나 출력 결과가 동일한 경우는 반복적인 렌더링은 불필요하게 됩니다. 따라서 메모이제이션을 사용해 이전 계산 결과를 기억하고 재사용합니다.

기획부터 와이어프레임 제작 기간을 제외하고 중간 발표 이전까지의 기능 구현 기간이 일주일정도였기에, ‘일단 먼저 구현해내는’ 것을 최우선 목표로 잡고 진행했습니다. 말씀해주신대로 메모이제이션을 할 수 있는 각 hook들을 상황에 맞게 비교, 적용하면서 구현하지 않았기 때문에 지금은 렌더링 횟수나 성능에 아쉬운 부분이 많습니다.

다만 기한 내 목표로 한 기능을 대부분 끝낼 수 있어 유저 배포 전까지는 최적화를 최우선으로 하여 유저가 부드럽고 좋은 사용자 경험을 느낄 수 있도록 하는 것을 목표로 하고 있습니다. 구체적으로는 웬만한 페이지는 다 lighhouse의 점수를 각 항목 90점 이상씩 끌어올리는걸 목표로 하고 있습니다. 코드를 리팩토링했다고 자신있게 말할 수 있을 만큼 성능 개선에 힘써보겠습니다.

참고 리액트 메모이제이션을 할 수 있는 hook의 종류들

1. React.memo : 컴포넌트를 래핑해 이전 렌더링 결과를 기억하고, props가 변경되지 않으면 이전 결과를 재사용한다. React.memo는 보통 함수 컴포넌트를 메모이제이션할 때 사용된다.
2. useMemo : 메모이제이션된 값을 반환하되, 의존성 배열의 값이 변경되지 않는 한 이전 결과를 재사용한다. 특정 계산을 한 번만 수행하거나, 비용이 많이 드는 작업을 최적화할 때 적합하다.
3. useCallback : 메모이제이션된 콜백 함수를 반환한다. 이 또한 의존성 배열의 값이 변경되지 않는 한 이전 콜백함수를 재사용한다. 자식 컴포넌트에게 콜백함수를 전달할 때 성능 최적화를 위해 사용된다.
4. useRef : 메모이제이션된 변수를 생성한다. useRef로 변수를 저장하고 업데이트할 수 있으며, 이 변수는 컴포넌트가 다시 렌더링되어도 변경되지 않는다.
5. useContext : 컨텍스트 값을 메모이제이션하여 이전 값과 동일할 경우 이전 결과를 재사용한다. useContext를 사용해 컨텍스트 값을 전달할 때 성능 최적화를 할 수 있다.

참고 리액트에서의 최적화는?