컴포넌트 최적화
-
[컴포넌트 최적화] React.memo, useMemo, useCallback의 차이점과 활용프론트엔드 개발자가 될거야./react 2022. 9. 26. 16:46
세 달 동안 React기반으로 세 개의 프로젝트를 완성했다. 구현하는 것을 목적으로 달려왔기에 프로젝트가 끝난 이후 리팩토링을 진행하면서 나의 코드가 효율적인지 아닌지 고민해 보게 됐다. 그러면서 리액트의 렌더링에 대해 더 깊게 알고 싶었다. 리액트는 매우 유용하지만 렌더링에 주의하여 사용해야 한다. 렌더링을 할 필요가 없는 컴포넌트까지 항상 렌더링이 된다면 이는 성능이 좋지 않다고 할 수 있다. 이를 위해 활용해야 하는 것이 바로 React.memo, useMemo, useCallback이다. 먼저 알아야 하는 것은 리액트에서 리렌더링이 발생하는 3가지 조건이다. 리액트에서 리렌더링이 발생하는 3가지 조건 1. 본인이 가진 state에 변화가 생긴 경우 2. 부모 컴포넌트가 리렌더링이 일어난 경우 3...