Search 기능 맨드러보기 (1) - useCallback

설치

더보기

Rapid api 사용

$ npx create-react-app 

$ npm i react-router-dom

$ npm i axios react-query

$ npm i react-loader-spinner react-paginate

대충 요러케 해가지고 설치 끗

useCallback

- Hooks 함수  
- 불필요한 렌더링을 방지하여 렌더링 성능 최적화  
- 콜백 함수를 메모이제이션 함 

• 메모이제이션?
  • 동일한 내용을 가지더라도 매번 새로운 인스턴스가 생성되지 않도록 하는 것.
  • 메모이제이션 되면 콜백 함수는 동일 인스턴스를 유지하므로 콜백이 재생성되지 않는다.

- 언제 사용?

1. 콜백 함수가 자식 컴포넌트의 props로 전달될 때
   : 부모 컴포넌트가 렌더링될 때마다 자식 컴포넌트에게 동일한 콜백 함수 제공하는 경우,
   useCallback을 사용하여 콜백 함수를 메모이제이션하여 성능을 향상시킨다.
   
   
2. 의존성 배열에 변화하지 않는 값들을 포함할 때
   : 의존성 배열을 인자로 받는데 그 중 하나라도 변화하면 메모이제이션된 콜백 함수는 다시 생성된다.
   그러므로 의존성 배열에 변화하지 않는 값들만 포함하는 것이 중요하다.

// 1. 상태에 의존하는 경우:
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
    console.log(count);
}, [count]);
// count 상태를 참조하고 있으므로, count가 변경될 때마다 새로운 콜백 함수가 생성된다. 



// 2. 프로퍼티에 의존하는 경우:
const MyComponent = ({ data }) => {
    const handleItemClick = useCallback((id) => {
        console.log(`Clicked item with ID: ${id}`);
    }, [data]);

    // ...
};
// data 프로퍼티를 참조하고 있으므로, data가 변경될 때마다 새로운 콜백 함수가 생성된다.



// 3. 외부 함수에 의존하는 경우:
const MyComponent = () => {
    const fetchData = useCallback(async () => {
        // 비동기 데이터를 가져오는 로직...
    }, []);

    useEffect(() => {
        fetchData();
    }, [fetchData])
}
// fetchData는 외부 함수이므로 변경될 필요가 없다. 
// 그러나 useEffect 훅이 fetchData를 디펜던시로 사용하고 있으므로, 
// fetchData가 변경될 때마다 useEffect가 다시 실행된다.

 

강의 보다가 의문점

  ...

  const [searchParams, setSearchParams] = useSearchParams(); 
  // (useCallback 기준에서) 외부 변수 혹은 외부 함수

  ...

  const onKeyUp = useCallback((e) => {
    // useCallback 훅은 콜백 함수를 메모이제이션 하는데 사용되며, 
    // 의존성 배열은 해당 콜백 함수가 변경되어야 하는 값을 나타냄.
    const newSearchText = e.target.value.trim();

    if (e.key === "Enter" && newSearchText.length > 0) {
      setSearchParams({ q: newSearchText });
    }
  }, [setSearchParams]);

강의에서는 useCallback 디펜던시로 setSearchParams 함수를 넣었으나 설명이 없어서 의문이었다.

 

setSearchParams 함수는 useSearchParams 훅을 통해 생성되는 함수이다.

이 함수를 useCallback의 콜백 함수에서 메모이제이션 하는 데에 사용되었다면, 의존성 배열로 해당 '외부 함수'를 포함해줘야 한다.