[React] 당신은 상태를 필요로 하지 않을 것입니다. #1 - 보존(with. useMemo) 편

이 포스트는 React 버전 18.3.1을 기준으로 합니다.

const state = heavyFactory();

useState와 useEffect 없이 위와 같은 코드로 파생 상태를 운용하고 싶습니다. 그런데 작업이 꽤 오래 걸립니다. 한 번 정도는 괜찮지만, 렌더링마다 반복되는 것은 꽤 부담스럽습니다. 눈물을 머금고 이전 방식으로 돌아가야 하는 걸까요? 걱정하지 마세요. 아래와 같이 간단히 해결할 수 있습니다.

const state = useMemo(heavyFactory, deps);

useMemo를 사용하면 의존성에 대해 결과를 보존할 수 있습니다. 즉, 렌더링이 반복되는 상황에서 연산이 반복되는 것을 방지할 수 있습니다.

물론 useMemo가 항상 효과적인 것은 아닙니다. React 공식 문서에 따르면 useMemo는 의존성이 변경되지 않더라도 캐시가 무효화될 수 있습니다. 이러한 점은 대부분 문제를 만들지 않지만, 상황에 따라서 우려스러울 수도 있습니다.

내용은 다음 편에서 이어집니다. 읽어주셔서 감사합니다!

묻고 답하기

개인적인 판단에 의해 적절하다고 여겨지는 경우, 모두가 볼 수 있도록 이곳에 문답이 추가됩니다. 그렇지 않더라도 질문에 대한 답변은 별도로 이루어집니다.