useCallback

stella6767·2021년 8월 21일
0

React Tip

목록 보기
15/24

useCallback 은 useMemo를 기반으로 만들어져서 두 개는 비슷한 점을 가진 Hooks 이다.

useMemo는 특정 결과값을 재사용 할 때 쓰고, useCallback은 특정 함수를 재사용 할 때 사용한다.

useCallback를 사용할 때 함수 안에서 사용하는 state, props가 있다면,

반드시 deps 배열 안에 포함시켜야한다.

그리고 컴포넌트에서 prosp로 함수를 받아왔다면 그 함수도 deps에 포함시켜야한다.

함수를 자식컴포넌트에 props로 넘겨줄 때는 항상 useCallback을 사용해야한다.

그렇지 않으면 자식컴포넌트는 계속 새로운 함수를 생성한다고 받아들이기 때문에 렌더링이 계속 실행된다.

useCallback을 사용하지 않은 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어진다.

함수가 새로 만들어지는 것이 성능을 떨어뜨리지는 않지만,

컴포넌트 결과물을 재사용하거나 하는 최적화 작업을 할 때 함수을 재사용하는 것이 필요하다.

useCallback 사용법

기본 형태 :

useCallback( function, deps )

  • function : 재사용 할 함수
  • deps : 검사할 특정 값을 담은 배열

(배열 안의 값이 바뀌면 함수를 호출해서 연산하고, 값이 바뀌지 않으면 이전에 연산한 값을 재사용한다.

함수 안에서 state나 props가 바뀌면 함수를 호출해서 실행한다.)

const onSubmit= useCallback(()=>{
    if(password !== passwordCheck)  {
       setPasswordError(true);
       return;
    }
    if(!term){
      console.log("대체 term 이 왜>>>", term); //왜??????
       setTermError(true);
       return;
    }
    console.log(id,nickName,password,passwordCheck, term);
  },[password, passwordCheck,passwordError]); //여기에 term이 들어가야지만 작동된다... 이유를 알아보자... 함수 안에서 쓰이므로 넣어줘야 된다..
profile
사수없는 개발자의 좌충우돌 성장기. 여기 적는 글들은 신뢰성 0%이므로 믿지 마세요!

0개의 댓글