인프런 커뮤니티 질문&답변
작성한 질문수
useEffect와 useMemo 차이점에 대해서
해결된 질문
작성
·
127
0
안녕하세요
설명해주신 useMemo의 역할이 재랜더링 되는 경우 컴포넌트를 랜더링 특정 경우에만 재랜더링 하도록 하고 그 외는 그대로 값을 두는 것으로 성능을 증가 시키는 개념으로 이해를 했습니다.
지난 시간에 알려주신 useEffect의 경우도 deps에 값을 지정해주면 그 상태에 따라서면 랜더링을 진행하는데 차이점이 있나요?
답변 2
0
안녕하세요 이정환입니다.
useMemo와 useEffect의 차이점에 대해 질문 주신걸까요? 그렇다고 가정하고 답변드리겠습니다. 혹시 아니라면 조금 더 구체적으로 재 질문 부탁드립니다 😃
useMemo는 컴포넌트가 리렌더링 될 때에 특정 값을 재생성 하지 않도록 방지하는 최적화 관련 Hook입니다. 참고로 컴포넌트를 불 필요한 상황에 리렌더링 되지 않도록 방지하는 React.memo와는 다른 기능이니 이 점도 함께 참고하시면 좋겠습니다.
useEffect는 컴포넌트의 사이드 이펙트를 제어하는 Hook입니다. 이때의 사이드 이펙트란 우리말로 부수효과라고 할 수 있는데요 쉽게 말해 메인 로직이 아닌, 사이드로 발생해야 하는 로직을 실행하고 관리하는 기능을 한다고 이해하시면 됩니다.
그렇다면 어떤 로직들을 사이드로 발생하는 로직이라고 볼 수 있을까요? 컴포넌트의 메인 로직은 UI를 화면에 렌더링 하는 것이므로 그 외의 모든 일은 다 사이드로 발생하는 일들이라고 할 수 있겠습니다. 예를 들면 컴포넌트가 리렌더링 되었을 때 콘솔에 특정 메세지를 출력한다거나, 컴포넌트 내부의 특정 State의 값이 변경 되었을 때 해당 값을 콘솔에 출력하는 등의 기능이 있습니다.
이런 사이드 로직을 관리하기 위해서 useEffect는 두번째 인수로 deps라고 불리우는 배열을 전달받아, 해당 배열의 값이 변경될 경우 첫번째 인수로 전달된 콜백 함수를 실행하는 방식으로 동작합니다.
이렇게 useEffect와 useMemo에 대해 다시 한번 정리해 보았는데요, 결론적으로 두 Hook간의 차이점은 useMemo는 특정한 값을 다시 생성하지 않도록 최적화 하는데에 사용되는 반면, useEffect는 특정 상황에 특정 로직을 실행하기 위해 사용되므로 둘은 비교할 수 없이 완전 다른 기능을 한다고 이해하시면 좋겠습니다.
PS. 혹시 잘 이해가 안되시는 부분이 있다면 꼬리질문 달아주세요 😃
0
안녕하세요, 인프런 AI 인턴입니다. 마이티님.
useMemo와 useEffect의 차이점에 대해 설명드리겠습니다.
useEffect와 useMemo는 둘 다 React에서 컴포넌트의 성능 최적화와 관련이 있지만, 그 목적과 사용 방법에서 중요한 차이가 있습니다.
useMemo
- 목적: 계산 결과를 메모이제이션하여 불필요한 연산을 방지. 성능 최적화가 주된 목적입니다.
- 사용 시점: 계산 결과가 재사용 가능한 경우, 즉 값의 불필요한 재계산을 피하고 싶을 때 사용합니다.
- 예시: 복잡한 계산이나 비용이 큰 연산을 하는 경우, 그 결과를 useMemo로 저장해두고 필요한 시점에 재사용할 수 있습니다.
useEffect
- 목적: 컴포넌트가 렌더링된 후 또는 특정 상태/props가 변경된 후 부수적인 작업(side-effects)을 수행합니다.
- 사용 시점: 데이터 가져오기(fetch), DOM 조작, 구독 설정 및 해제 등이 필요할 때 사용합니다. 단순히 값을 유지하는 것이 아닌 상태를 관찰하면서 작업을 해야 할 때 유용합니다.
차이점
- 주된 차이점: useMemo는 값을 메모이제이션하여 연산을 최적화하기 위한 것이고, useEffect는 컴포넌트의 효과(side-effects)를 관리하기 위한 것입니다.
- 종속성(Dependency): useMemo는 특정 상태가 변경되었을 때만 값을 재계산하지만, useEffect는 특정 상태의 변경에 따라 부수 효과를 실행합니다.
이를 통해 각각의 훅은 고유의 목적과 사용 시점을 갖고 있습니다. 성능 최적화가 필요하고, 메모이제이션이 가능할 때는 useMemo를, 부수적인 작업이 필요하면 useEffect를 활용하시면 됩니다.
질문에 대해 더 알고 싶으시다면, 유사한 주제를 다룬 질문들을 참고하시면 도움이 될 것입니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.