패스트캠퍼스 환급챌린지 46일차 미션 (3월 17일) : 인터랙티브 웹 강의 후기

서론

React 애플리케이션 개발에서 성능 최적화는 매우 중요한 주제다. 특히 함수와 계산된 결과 값의 최적화는 불필요한 리렌더링을 줄이고, 애플리케이션의 반응 속도를 높이는 데 큰 역할을 한다. 최근에 들은 두 강의, 'useCallback을 이용한 함수 최적화'와 'useMemo를 이용한 결과 값 최적화'는 이러한 최적화 기술에 대해 깊이 있게 다뤘다. 이 강의들을 통해, 함수와 결과 값의 최적화를 위한 React의 두 가지 중요한 Hooks, useCallback과 useMemo에 대해 배울 수 있었다.

본론

환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.

• 첫 번째 강의: useCallback을 이용한 함수 최적화
• 두 번째 강의: useMemo를 이용한 결과 값 최적화

첫 번째 강의: useCallback을 이용한 함수 최적화

useCallback 훅은 함수를 메모이제이션(캐싱)함으로써, 컴포넌트가 리렌더링될 때마다 동일한 함수를 새로 생성하는 것을 방지한다. 이는 특히 자식 컴포넌트에 props로 함수를 전달할 때 유용하다. 자식 컴포넌트가 받은 함수가 리렌더링될 때마다 변경되지 않도록 보장함으로써, 불필요한 자식 컴포넌트의 리렌더링을 방지할 수 있다. 다음은 useCallback을 사용한 예시 코드다.

 

이 예시에서 increment 함수는 useCallback에 의해 메모이제이션되어, ParentComponent가 리렌더링될 때마다 동일한 참조를 유지한다. 따라서 ChildComponent는 onIncrement props가 변경되지 않는 한 리렌더링되지 않는다.

두 번째 강의: useMemo를 이용한 결과 값 최적화

useMemo 훅은 계산된 결과 값을 메모이제이션함으로써, 같은 입력에 대해 함수를 재계산하지 않도록 한다. 이는 복잡한 계산 로직이 포함된 컴포넌트의 성능을 개선하는 데 도움을 준다. React.memo와의 차이점은, React.memo는 컴포넌트 자체를 메모이제이션하는 반면, useMemo는 컴포넌트 내의 특정 값이나 계산 결과를 메모이제이션한다는 것이다. 다음은 useMemo를 사용한 예시 코드다.

 

이 코드에서 calculateExpensiveValue 함수의 결과는 count 값이 변경될 때만 다시 계산된다. count가 같으면 useMemo에 의해 캐싱된 값이 재사용되어 성능이 개선된다.

결론

'useCallback을 이용한 함수 최적화'와 'useMemo를 이용한 결과 값 최적화' 강의를 통해, React 애플리케이션의 성능을 개선하는 데 필수적인 두 가지 Hooks에 대해 깊이 있게 배울 수 있었다. 이러한 최적화 기법들은 불필요한 계산과 리렌더링을 줄임으로써, 애플리케이션의 반응 속도를 높이고 사용자 경험을 개선하는 데 큰 도움이 될 것이다. 앞으로 이 지식을 활용하여, 더 효율적이고 성능이 우수한 웹 애플리케이션을 개발할 수 있을 것으로 기대된다.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N