[React] useCallback을 사용하는 이유

2024. 7. 24. 14:30· Framework/React
목차
  1. useCallback
반응형

useCallback

React 컴포넌트가 리렌더링되면 해당 컴포넌트 함수들이 새로 만들어집니다.

자바스크립트에서는 함수도 곧 객체이기 때문에 리렌더링이 되면 '내용이 동일한 새로운 함수 객체'가 생성됩니다.

useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다.

두번째 매개변수인 deps가 업데이트되지 않는다면 함수 객체를 독립된 메모리에 캐싱해두고, 리렌더링 시 새로운 함수 객체를 생성하지 않기 때문에 해당 함수를 props로 가지는 자식 컴포넌트들은 함수가 바뀌었다고 생각하지 않게 됩니다.

따라서, 자식 컴포넌트의 props로 전달해주는 함수들은 useCallback을 사용해주면 재실행이 일어나는 횟수가 줄어들기 때문에 더 효율적인 앱을 만들 수 있습니다.

const onCreate = () => {
  const user = {
    id: nextId.current,
    username,
    email
  };
  setUsers(users.concat(user));

  setInputs({
    username: '',
    email: ''
  });
  nextId.current += 1;
};

const onRemove = id => {
  // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
  // = user.id 가 id 인 것을 제거함
  setUsers(users.filter(user => user.id !== id));
};
const onToggle = id => {
  setUsers(
    users.map(user =>
      user.id === id ? { ...user, active: !user.active } : user
    )
  );
};

 

useCallback 사용

 const onCreate = useCallback(() => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  }, [users, username, email]);


const onRemove = useCallback(
    id => {
      // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
      // = user.id 가 id 인 것을 제거함
      setUsers(users.filter(user => user.id !== id));
    },
    [users]
);

 

더보기

Reference

  • https://react.vlpt.us/basic/18-useCallback.html
반응형
저작자표시 비영리 변경금지 (새창열림)

'Framework > React' 카테고리의 다른 글

[React] useMemo와 useCallback  (0) 2024.07.26
[React] State와 스냅샷  (1) 2024.02.13
[React] 자바스크립트 새로고침  (0) 2023.02.14
[React] 왜 React를 쓸까?  (0) 2023.02.07
React 시작하기  (0) 2022.11.14
  1. useCallback
'Framework/React' 카테고리의 다른 글
  • [React] useMemo와 useCallback
  • [React] State와 스냅샷
  • [React] 자바스크립트 새로고침
  • [React] 왜 React를 쓸까?
쓰링
쓰링
Web Front Developer🐣
반응형
쓰링
부앙단 개발로그
쓰링
전체
오늘
어제
  • 전체보기 (57)
    • Language (25)
      • Typescript (4)
      • Javascript (5)
      • HTML, CSS, SCSS (9)
      • Java (3)
      • PHP (1)
      • Dart (3)
    • Framework (8)
      • React (7)
      • Flutter (0)
    • Library (6)
    • Figma (1)
    • Git (4)
    • DB (3)
    • CS (1)
    • Algorithm (6)
      • Baekjoon (2)
      • SWEA (2)
      • 도서 후기 (2)
    • SSAFY (3)
      • SSAFYcial (1)
      • SSAFY 8기 (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 싸피8기
  • 싸피 합격
  • 싸피 전공자
  • java 처음
  • 초보자를 위한 java
  • 백준 자바
  • 백준 알고리즘 풀이
  • 웰컴 키트
  • 싸피8기합격
  • 백준 java 풀이
  • 백준 Java
  • 싸피
  • 백준 알고리즘 공부
  • 싸피 웰컴 키트
  • 백준 자바 풀이
  • 백준 입출력과 사칙연산
  • java시작하기
  • ssafy
  • 싸피 합격 후기
  • SSAFY 비전공
  • java전공자
  • 백준 브론즈
  • 웰컴키트
  • 처음 java
  • java초보자
  • SSAFY 합격 후기
  • SSAFY 웰컴키트
  • SSAFY8기
  • 싸피 웰컴
  • SSAFY 전공

최근 댓글

최근 글

hELLO
쓰링
[React] useCallback을 사용하는 이유
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.