설명 전에 먼저 두 가지 배경 지식을 알고 계셔야 합니다. 1. 기본적으로 React 컴포넌트는 리렌더링이되면 모든 자식들을 재귀적으로 다시 렌더링합니다. 2. React 컴포넌트 안에 정의된 함수는 렌더링마다 매 번 새로 생성됩니다. 이 배경지식을 가지고 아래의 시나리오를 읽어보시면 최적화가 어느 부분에서 필요한지를 유추해보실 수 있습니다. 1. Parent와 Child 컴포넌트가 있음 2. Parent에서 Child 컴포넌트에 handleSubmit 이라는 함수를 전달함 3. Parent 컴포넌트가 1초에 100번 렌더링됨, 이 때 handleSubmit도 100번 재생성됨 4. Child 컴포넌트는 handleSubmit이 100번 바뀌므로 Child 컴포넌트도 100번 리렌더링됨 어느 부분에서 최적화가 필요한지 감이 오시나요? 3번을 보면 handleSubmit이 100번 재생성되서 Child 컴포넌트에 불필요한 리렌더링을 유발하여 퍼포먼스 이슈를 발생시키는 것을 확인할 수 있습니다. 이 때, useCallback/useMemo를 사용하면 자식 컴포넌트의 불필요한 리렌더링을 방지할 수 있습니다. '그냥 되는대로 함수에 useCallback/useMemo를 갖다 쓰면 성능은 보장되는거 아닌가요?' 라는 악마의 유혹에 빠질수도 있습니다. 하지만 모든 것에 공짜는 없다는 사실을 기억하셔야 합니다. useCallback/useMemo는 내가 정의한 함수를 메모리에 기억하는 방식으로 최적화를 합니다. 렌더링이 여러 번 일어나도 브라우저가 이를 기억하고 있기 때문에 다시 함수를 만들지 않는 겁니다. 브라우저가 이를 기억한다는 건 무슨 의미일까요? 메모리에 함수를 저장한다는 뜻입니다. 즉, 모든 함수를 훅으로 감싼다면 브라우저의 메모리 사용량도 비례해서 커진다는 의미입니다. 따라서, 정말 필요한 경우에만 최적화를 진행하시면 됩니다.

다음 내용이 궁금하다면?

지금 간편 가입하고 다음 내용을 확인해 보세요!

또는

이미 회원이신가요?

2023년 3월 18일 오전 10:19

 • 

저장 30조회 1,779

댓글 0