[React] useMemo / useCallback

Dorong·2023년 5월 25일
0

React

목록 보기
24/29
post-thumbnail

✅ useMemo

  • 함수 컴포넌트 내부에서 발생하는 연산을 최적화

🔸 사용예시

  • input으로 state에 정수값을 담아 submit 버튼 누르면 값을 등록하고 평균을 계산해 화면에 렌더링하는 함수가 있다면
  • input만 바뀌더라도 state가 변경되어 컴포넌트가 재렌더링되며 화면에 보여지는 결과값 계산을 계속해서 실행하게됨
...
<div>Average : {getAverage(list)}</div>
...
  • 이때, 해당 값을 useMemo로 별도의 함수로 정의하여 화면에 렌더링 한다면, 의존성 배열을 받아 해당 값이 변경될 때만 재 실행
const avg = useMemo(() => getAverage(list), [list])
...
<div>Average : {avg}</div>


✅ useCallback

  • useMemo와 상당히 유사
  • 주로 렌더링 성능 최적화에 사용
  • 만들어둔 함수 재사용 가능

  • 컴포넌트 내에 함수를 정의해두면, 컴포넌트가 리렌더링 될 때마다 새로 만들어진 함수를 사용하게 됨
  • 일반적으로 크게 문제가 되지는 않지만, 리렌더링이 잦다면 성능 저하가 발생
  • 의존성 배열로 재정의 조건을 설정할 수 있음
const onChange = useCallback((e) => {
	setNumber(e.target.value);
},[]) // 🔹 컴포넌트 처음 렌더링 될 때만 함수 생성, 계속 재사용

const onInsert = useCallback((e) => {
	const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
}, [numebr, list]) // 🔹 number, list가 바뀌었을 때만 함수 생성
profile
🥳믓진 개발자가 되겠어요🥳

0개의 댓글