[React_Basic 7] TODO 리스트 만들기 6 - useCallback(함수최적화)

의존성 배열을 이용해서 함수를 최적화 시켜주는 기능이다.  
의존성 배열이 빈값일 경우( "[  ]" ) 최초 랜더링시에만 함수가 생성된다.
- 지난 챕터에서 userMemo로 랜더링을 최소화 했지만, 함수가 만약 App -> Lists -> List컴포넌트로 props를 통해 내려준다면 다시 컴포넌트가 호출되기 때문에 useCallback함수를 사용해서 최적화 시켜준다.

 

1. [List.js]에 있는 함수중 handleClick이라는 함수를 [App.js]로 옮겨서 App -> Lists -> List컴포넌트로 props를 전달하도록 만듬.

2. handleClick함수를 useCallback으로 감싼후 의존성 배열 [  ]에 todoData를 넣어준다

3. 배열안에 들어 있는 todoData가 변하지 않을땐 handleClick함수가 실행되지 않는다. 즉, 필요할때만 쓰이기 때문에 최적화됨.

 

[App.js]

const handleClick = useCallback(
    (id) => {
      let newTodoData = todoData.filter((data) => data.id !== id); //클릭하지 않은 key값 데이터만 뜨게 됨.
      console.log("newTodoData", newTodoData);
      setTodoData(newTodoData);
    },
    [todoData]
  );

[결과화면] 

- handleClick함수는 [List.js]에서 onClick이벤트 실행시 호출되는 함수인데, 이 함수는 App.js에서 useCallback의 의존성배열[todoData ]로 인해 onClick시 todoData가 변할때만 호출되도록 만들어놨음. 그래서 입력버튼을 누를때만 이 함수가 호출되므로, 글씨 쓸때는 List, Lists컴포넌트는 호출되지 않는다.

 

 <div className="items-center">

          <button

            className="px-4 py-2 float-right"

            onClick={() => handleClick(id)}

          >

            X

          </button>

 

- 입력 버튼 클릭시 호출되는 컴포넌트 (useCallback함수로 인해 todoData가 바뀔때만 호출됨.)

 

 

- 글씨 쓸때 호출되는 컴포넌트 (입력버튼 클릭X - List,Lists함수는 호출되지 않음)