항해 플러스 3. React Hook 직접 만들기

🧙‍ : 먼저, 우리는 왜 클래스 기반 컴포넌트에서 함수형 컴포넌트로 변화했는지를 고민해볼 필요가 있습니다. Hooks는 리액트 개발의 중요한 전환점입니다. useState, useEffect, useMemo, useCallback 같은 다양한 Hooks는 클래스 컴포넌트에서 처리하기 어려웠던 상태 관리와 생명주기 로직을 어떻게 단순화할 수 있을까요? 이 질문에 대한 답을 찾으며, 리액트가 제공하는 더 효율적인 상태 관리 방식을 배워봅시다.

다음으로, 성능을 어떻게 최적화할 수 있을지를 생각해보겠습니다. 불필요한 연산을 피하고 성능을 최적화하는 것은 대규모 애플리케이션에서는 매우 중요한 과제입니다. useMemo와 useCallback 같은 메모이제이션 기법을 통해 불필요한 리렌더링을 줄이고 효율적인 렌더링을 구현할 수 있는 방법은 무엇일까요? 이러한 질문을 통해 메모이제이션이 성능 최적화에 어떤 도움을 줄 수 있을지 탐구해보겠습니다.

이번주 과제의 내용이었슴니다.
처음에 왁왁 겁먹었는데, 해보니까 괜찮아서 이번주는 느긋하게 했던 것 같습니다.

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)

이번 과제를 통해, 프로젝트에서 메모이제이션을 제대로 활용하지 않았다는 점을 알게 되었습니다. useMemo나 useCallback 같은 React Hooks에 대한 경험이 부족했고, 그로 인해 성능 최적화에 대한 이해가 부족하다는 것을 느꼈습니다. 또한, Hooks 전반에 대한 지식도 더 깊이 쌓을 필요가 있다는 점을 깨달았습니다.

2. 시도

먼저 React의 다양한 Hooks를 학습하고, 직접 구현하여 테스트를 진행했습니다. 특히, useState, useEffect, useMemo, useCallback을 중점적으로 다루며, 각 훅이 상태 관리와 성능 최적화에 어떤 영향을 미치는지 실험해봤습니다. 더불어, 객체 비교를 통한 메모이제이션의 효과를 테스트하기 위해 shallowEquals와 deepEquals 함수를 구현해보았습니다.

3. 해결

• Hooks 활용: useState와 useEffect를 통해 상태 관리 및 부수 효과 처리를 간결하게 할 수 있었고, 이를 통해 코드의 복잡도를 크게 줄일 수 있었습니다.

• 메모이제이션: useMemo와 useCallback을 적용해, 불필요한 재연산을 방지하고 성능을 최적화했습니다. 또한, memo와 deepMemo를 구현하여, 컴포넌트의 props를 얕은 비교와 깊은 비교를 통해 불필요한 리렌더링을 방지할 수 있었습니다.

• 성능 프로파일링: 성능 최적화 작업을 위해 React의 성능 프로파일러를 사용해 애플리케이션의 성능을 모니터링하고, 어디서 리렌더링이 발생하는지 분석하며 개선할 수 있었습니다.

4. 알게 된 것

Keep : 현재 만족하고 계속 유지할 부분

• Hooks 사용법에 대한 이해: 이번 과제를 통해 useState, useEffect, useMemo, useCallback과 같은 Hooks 사용법에 익숙해졌습니다. 앞으로도 더 다양한 상황에서 활용할 계획입니다.

• 메모이제이션의 도입: 컴포넌트 성능 최적화를 위해 useMemo, useCallback, memo 등을 도입하여 불필요한 렌더링을 줄이는 것이 매우 유용했습니다. 이러한 최적화 기법들을 계속해서 활용할 것입니다.

Problem : 개선이 필요하다고 생각하는 문제점

• Hooks 활용의 부족: 프로젝트에서 Hooks를 충분히 사용하지 않아서 지식이 부족하다는 점을 인식했습니다. 특히, 다양한 상황에서 Hooks를 더 깊이 활용할 수 있는 기회가 많았음에도 불구하고 이를 놓친 부분이 아쉬웠습니다.

• 비교 함수의 성능: shallowEquals와 deepEquals를 구현하면서 단순한 비교 작업이 복잡한 객체 구조에서는 성능에 영향을 미칠 수 있다는 점을 느꼈습니다. 이를 효율적으로 다루기 위한 더 깊은 지식이 필요하다는 것을 깨달았습니다.

Try : 문제점을 해결하기 위해 시도해야 할 것

• 더 다양한 Hooks 학습: useReducer, useContext 같은 덜 익숙한 Hooks를 공부하고, 프로젝트에서 상황에 맞는 Hooks를 적극적으로 사용해볼 계획입니다. 특히 상태 관리와 컨텍스트 기반 데이터 흐름을 최적화할 수 있는 방법을 연구해볼 것입니다.

• 성능 프로파일링 도입: 개발 중에 React의 성능 프로파일링 도구를 사용하여 렌더링 성능을 분석하고, 실제로 useMemo, useCallback, memo가 성능에 미치는 영향을 실시간으로 모니터링할 계획입니다. 이를 통해 보다 효과적인 최적화를 시도할 수 있을 것입니다.

• 비교 함수 개선: shallowEquals, deepEquals의 성능을 더 최적화하고, 이를 프로젝트의 메모이제이션 HOC나 Hooks에서 활용해 성능을 높이는 방법을 탐구할 것입니다. 특히 객체나 배열 비교의 효율성을 높이기 위해 구조를 단순화하거나, 불필요한 비교를 줄이는 로직을 구상할 예정입니다.