인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

useMemo는 컴포넌트가 리렌더링 될 때에 특정 값을 재생성 하지 않도록 방지하는 최적화 관련 Hook입니다. 참고로 컴포넌트를 불 필요한 상황에 리렌더링 되지 않도록 방지하는 React.memo와는 다른 기능이니 이 점도 함께 참고하시면 좋겠습니다.

useEffect는 컴포넌트의 사이드 이펙트를 제어하는 Hook입니다. 이때의 사이드 이펙트란 우리말로 부수효과라고 할 수 있는데요 쉽게 말해 메인 로직이 아닌, 사이드로 발생해야 하는 로직을 실행하고 관리하는 기능을 한다고 이해하시면 됩니다.

그렇다면 어떤 로직들을 사이드로 발생하는 로직이라고 볼 수 있을까요? 컴포넌트의 메인 로직은 UI를 화면에 렌더링 하는 것이므로 그 외의 모든 일은 다 사이드로 발생하는 일들이라고 할 수 있겠습니다. 예를 들면 컴포넌트가 리렌더링 되었을 때 콘솔에 특정 메세지를 출력한다거나, 컴포넌트 내부의 특정 State의 값이 변경 되었을 때 해당 값을 콘솔에 출력하는 등의 기능이 있습니다.

이런 사이드 로직을 관리하기 위해서 useEffect는 두번째 인수로 deps라고 불리우는 배열을 전달받아, 해당 배열의 값이 변경될 경우 첫번째 인수로 전달된 콜백 함수를 실행하는 방식으로 동작합니다.

이렇게 useEffect와 useMemo에 대해 다시 한번 정리해 보았는데요, 결론적으로 두 Hook간의 차이점은 useMemo는 특정한 값을 다시 생성하지 않도록 최적화 하는데에 사용되는 반면, useEffect는 특정 상황에 특정 로직을 실행하기 위해 사용되므로 둘은 비교할 수 없이 완전 다른 기능을 한다고 이해하시면 좋겠습니다.

PS. 혹시 잘 이해가 안되시는 부분이 있다면 꼬리질문 달아주세요 😃

안녕하세요, 인프런 AI 인턴입니다. 2hhhhuuu님.

useEffect와 useMemo는 둘 다 리액트에서 흔히 사용하는 훅이지만, 사용 목적과 기능에 차이가 있습니다. 아래에서 각각의 특징을 간단히 설명드리겠습니다.

useEffect

• 목적: 컴포넌트가 렌더링될 때 부작용(side-effects)을 수행하기 위해 사용됩니다. 예를 들어, 데이터 가져오기, 구독 설정, 수동으로 DOM 조작하기 등이 있습니다.
  
• 동작: 의존성 배열의 값이 변경될 때마다 효과 함수가 실행됩니다. 이 후, 컴포넌트가 언마운트될 때에도 클린업(cleanup) 함수가 실행될 수 있습니다.
  

useMemo

• 목적: 값의 계산 결과를 메모이제이션(memoization)하여 불필요한 계산을 피하기 위해 사용합니다.
  
• 동작: 의존성 배열의 값이 변경될 때에만 메모이제이션 함수가 다시 실행되고, 그렇지 않으면 계산 결과가 그대로 반환됩니다. 이는 성능 최적화에 도움이 됩니다.
  

두 훅 모두 의존성 배열을 기반으로 동작하지만, useEffect는 부작용을 처리하고, useMemo는 연산 결과를 캐시하여 성능을 최적화하려는 목적이 있습니다.

여기 몇 가지 관련 질문 링크를 통해 더 많은 정보를 얻을 수 있습니다:

1. useMemo와 useEffect 차이
   
2. useMemo와 동일한것 같은데 차이점이 뭔가요??
   

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.