함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드
state를 함수 컴포넌트 안에서 사용할 수 있게 해주는 Hook
import { useState } from 'react'
1. state 변수 선언
const [변수, 변수 변경 값] = useState(변수의 초기값)
Ex)
const [counter, setCounter] = useState(0)
2. state 변수 값을 사용할 함수 선언
// counter 1씩 증가시키는 함수
const counterIncrease = () => {
setCounter(counter + 1);
}
// counter 초기화 함수
const counterReset = () => {
setCounter(0);
}
3. 함수 호출
return (
<>
<p> 현재 counter : {counter} </p>
<button onClick={clickIncrease}> 증가 </button>
<button onClick={reset}> 리셋 </button>
</>
)
4. 생선된 컴포넌트
컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook
특정 값 재사용하고자 할 때 사용하는 Hook
복잡한 연산의 중복을 피하고 React앱의 성능을 최적화한다
함수형 컴포넌트란 렌더링 될 때마다 함수 컴포넌트가 호출 된다는 뜻
➡️ 함수호출 되면 모든 내부 변수 초기화된다
즉, 컴포넌트 내부에 여러개의 함수가 있을 경우 하나의 값만
바뀌어도 모든 함수가 호출되어서 불필요한 연산이 다시 이뤄진다
복잡한 연산을 하는 함수를 useMemo
로 memoization 함
const 메모이제이션할 함수 = useMemo(() => {
return 의존성 배열 값 바뀌면 호출되는 콜백함수}
,[의존성 배열 값])
특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용하는 Hook
useMemo
는 특정결과값을 재사용 할 때 사용 = 리턴 값을 재사용
useCallback
은 특정 함수를 새로 만들지 않고 재사용 = 함수를 재사용
출처 : React 공식문서
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).
const 메모이제이션할 함수 = useCallback(() => {
retrun 의존성 배열 값 바뀌면 호출되는 콜백함수}
,[의존성 배열 값])
의존성 배열
값이 변경될 때 함수가 호출되는 구조