TIL # 61 < 리렌더링 발생조건, useRef, React.memo, useMemo >

리렌더링 발생조건

1. 컴포넌트에서 state가 바뀌었을 때

2, 컴포넌트가 내려받은 props가 변경되었을 때

3, 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트 전부 리렌더링

 

useRef

https://itprogramming119.tistory.com/entry/React-useRef-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C

 

최적화

리액트에서는 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인방법

• memo(React.memo) : 컴포넌트를 캐싱(=컴포넌트를 기억)
• useCallback : 함수를 캐싱(=함수자체를 메모장에다 적어놓는다고 생각)
• useMemo : 값을 캐싱(=value를 메모장에 적어놓는다 생각)

memo(React.memo)

부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트 전부 리렌더링 되는 부분을 해결(자식 컴포넌트의 리렌더링을 막는다!)

 

사용법

자식컴포넌트에서 export default example이라고 했을때 export default React.memo(example)를 해주면 된다!

(= import { memo} 'react' 를 하고 export default memo(example))

 

 

useCallback

1. useCallback이란?

React.memo는 컴포넌트를 메모이제이션 했다면, useCallback은 인자로 들어오는 함수 자체를 기억(메모이제이션)

https://www.daleseo.com/react-hooks-use-callback/

 

 

useMemo

https://itprogramming119.tistory.com/entry/React-useMemo-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C