[React] useEffect, useCallback

이전 포스트 성능개선 비교 요약

useEffect

useEffect는 렌더링시 발생하는 side effect를 다루기 위한 목적이며, Mount, Update, Unmount 될때 사용 한다. useEffect는 인자로 Callback 함수와 2번째 인자는 배열(의존성 배열[deps]을 받는다.

형태

1. useEffect(() => {
	//작업...
})

2. useEffect(() => {
	//작업...
},[value])

3. useEffect(() => {
	//작업...
},[])

• 렌더링 될때 마다 실행
• 화면에 첫 레더링 될때 실행 , value 값일 바뀔때 실행
• 화면에 첫 렌더링 될때 실행

Unmount 작업

함수를 리턴해주면 해당 컴포넌트가 Unmount될때, 다음 렌더링 시 불릴 useEffect가 실행되기 이전에 함수가 실행됨

1. useEffect(() => {
	//작업...
  return () => {
	//작업 해지
  }
}, [])

주의점

만약 객체가 의존배열에 있는데도 useEffect가 계속 호출되는 이유는 메모리상 주소가 다른 주소이기 때문이다.

원시 타입 - Strig, Number, Boolean, Null, Undefined, Biglnt, Symbol

const one = 'one'
const two = 'two'

one === two => true

객체 타입 - Object, Array .................

const one = {
	number:'one'
}
const two = {
	number:'one'
}

one === two => false

변수라는 상자안에 메모리상 주소가 들어가잇고 다른 주소에 저장되어있기 때문에 false다.

useCallback

인자로 전달한 콜백 함수 자체를 메모이제이션하여 함수 자체를 재사용한다,

useCallback 2개의 인자를 받는다, 1번째 인자는 callback 함수 , 2번째 인자는 배열(의존성 배열[deps]을 받으며, 의존성 배열 내부에 있는 값이 변경되지않는 이상 다시 초기화되지 않음,

useCallback(() => {
	return value;
}, [item])

const calculate = useCallback((num) => {
	return num + 1;
}, [)
``