[React] useCallback 헤딩해보기.

1. 동기 + 사전지식

useCallback은 useMemo의 함수 버전으로 알고 있다. 두 Hooks는 함수, 변수를 Memoization해서 재사용성을 높이고, 성능을 향상시킨다고 하는데, 실제 개발에서는 DOM 트리의 복잡도와 설계 복잡도가 높아짐에 따라 원하는 대로 작동하지 않았다. 예상 시나리오와 실제 결과를 테스트 하면서 몸소 익히고, 관련 개발문서 및 레퍼런스로 참고한 자료들을 적어둘까 한다.

 

2. 초기 코드

useCallback 테스트를 위해 예제 코드를 만들어보자.

 

import { useState } from "react";

export const UseCallbackExample: React.FC = () => {
    
    const [todos, setTodos] = useState<string[]>([]);

    const addTodos = () => {
        const inputElement = document.getElementById('use-callback-input-1') as HTMLInputElement;
        setTodos([...todos, inputElement.value]);
        
        //input tag 초기화
        inputElement.value = null!;
    }

    return <div
        style={{
            display:'flex',
            flexDirection:'column',
        }}
        placeholder="TODO 입력"
    >
        <div>
            <input id={"use-callback-input-1"} onKeyUp={(event: any) => {
                if(event.code === 'Enter') {
                    addTodos();
                }
            }}/>
            <button onClick={addTodos}>추가</button>
        </div>
        <div> {
            todos.map((el: string) => <div>{el}</div>)    
        }</div>
    </div>
}

 

input, button, todoList로 이루어진 간단한 Todo 예제이다. 이 예제에서부터 시작하자.

 

3. 렌더링 될 때마다 함수도 새로 쓰인다는 사실을 어떻게 감지할 수 있을까?

(--내일부터 계속)