Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- bootstrap
- react env
- icon
- git lab
- API 토큰
- getModifierState
- 컨디셔널 렌더링
- ngrok실행
- dart 변수
- input type=file
- API token
- fetch
- CSS
- github
- react typescript
- nextjs .env
- nextjs 설치
- styled components
- Git
- rewrites
- SCSS
- typescript react
- There isn’t anything to compare
- createGlobalStyle
- github io
- npm styled-reset
- nextjs
- next.js css
- react
- ngrok설치
Archives
- Today
- Total
꾸준히 성장하는 개발자
[React Hooks] useMemo() / useCallback() / useMemo() ↔ React.memo() 차이 본문
React
[React Hooks] useMemo() / useCallback() / useMemo() ↔ React.memo() 차이
ahleum 2022. 5. 24. 14:36컴포넌트 성능을 최적화 하기 위해 사용되는 useMemo, useCallback 이 있다
useMemo( )
여기서 Memo는 memoization을 뜻하는데
동일한 값을 리턴하는 함수를 반복적으로 호출해야 한다면 맨처음의 값을
메모리에 저장해서 필요할때마다 다시 계산하지 않고 메모리에서 가져와 재사용하는 기법을 말합니다.
memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에
메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다.
useMemo는 메모리를 사용하면서 사용이 되기 때문에
불필요한 값까지 메모리에 넣게 되면 성능이 악화되기 때문에 꼭 필요할때만 사용하도록 한다.
useMemo( ) 구조
const value=useMemo(()=>{
return calculate();
}, [item]);
const value = useMemo(콜백함수(계산한값을 리턴해주는 함수) , 배열(의존성 배열));
useCallBack( )
useMemo의 함수버전이라고 생각하면 된다.
useCallback(fn, deps) = useMemo(()=>fn , deps)
위의 두가지는 이렇게 같다고 보면 된다.
useMemo 와 React.memo()
공통점
React.memo와 useMemo 모두 props가 변하지 않으면(이전 props와 동일하면) 인자로 넘긴 함수는 재실행되지 않고, 이전의 메모이즈된 결과를 반환한다는 점에서 공통점이 있다.
차이점
1. React.memo는 HOC , useMemo는 hook이다.
2. React.memo()는 HOC이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용 가능하지만,
useMemo()는 hook이기 때문에 오직 함수형 컴포넌트 안에서만 사용 가능하다.
'React' 카테고리의 다른 글
[React with TypeScript] (1) | 2022.05.27 |
---|---|
[React Hooks] useEffect( ) (0) | 2022.05.25 |
[React Hooks] useRef (0) | 2022.05.23 |
[React] React state 비동기성 (0) | 2022.05.20 |
[React 라이브러리] 상태 관리 라이브러리 Redux (0) | 2022.05.20 |