[TIL] useMemo, useCallback , React.memo

useMemo

• 값을 메모이제이션(저장)하는것
• 복잡한 계산식이나 복잡한 값을 기억하는것
• 리렌더링 될때 저장되어 있는 값을 불러오기에 성능 관리에 좋음

const [number,setNumber] = ([])
const [addNumber,setAddNumber] = ()
//useEffect처럼 뒤에 오는 의존성배열(dependency)에 number가 바뀔때만 업데이트 되도록
const sum = useMemo(() => expansiveCalculate(number),[number])
const todoAdd = () => {
	setNumber(pre => ...pre,parseInt(addNumber))
  	setAddNumber('')
}

useCallback

• 함수를 저장해놓는것

//렌더링 될때마다 함수도 같이 렌더링 되기에 
const onClick = () => {}

//useCallback안에 함수를 넣어준다
const memoizationCallback = () => {
	onClikc();
,[]}

React.memo

• 컴포넌트를 기억하는것
• 부모 컴포넌트한테 Props를 받으면, 부모의 컴포넌트가 렌더링될때마다 자식컴포넌트도 렌더링되기에 이를 방지하고자 사용

const Child = ({todo}) => {
	console.log('I am Child')
  return <div>Child : {todo}</div>
}
export default React.memo(Child)

참조 동일성

• React.memo를 사용할때 원시형타입(스트링, 넘버, 불리언 등)은 컴포넌트가 리렌더링 되어도 원본의 값이 변하지 않지만 참조형타입(객체, 배열)등은 컴포넌트가 렌더링될때마다 참조하는 주소의 값이 바뀌기 때문에 React.memo를 사용하여도 참조하는 주소의 값이 바뀌어 리렌더링 된다.
  이를 방지하기 위해 값을 참조하는 값을 useMemo로 감싸주고 컴포넌트도 React.memo를 같이 사용한다.

//부모 컴포넌트
const [todo,setTodo] = useState(0)
// const customTodo = {changeTodo:todo+'New' ,name:'admin'}
const customTodo = useMemo(() => {
	return {changeTodo:todo+'New' ,name:'admin'}
},[todo])


//자식컴포넌트
const Child = ({todo}) => {
	console.log('I am Child')
  return <div>Child : {todo}</div>
}
export default React.memo(Child)

배운점 & 느낀점

useMemo,React.memo를 배우면서 성능 관리에 대한 중요성을 알게 되었고, 지금까지는 깊게 고려해보지 않았던것들을 세세하게 공부해야할 시점이라고 느꼈다.