useCallback 의존성 배열

const getPosts = useCallback((page = 1) => {
        let params = {
            _page: page,
            _limit: limit,
            _sort: 'id',
            _order: 'desc',
            title_like: searchText,
        }

        if (!isAdmin) {
            params = {...params, publish: true}
        }

        axios.get('http://localhost:3001/posts', {
            params
        }).then((res) => {
            setNumberOfPosts(res.headers['x-total-count'])
            setPosts(res.data);
            setLoading(false);    
        })
    },[isAdmin, searchText])

 const onSearch = (e) => {
        if(e.key === 'Enter') {
            history.push(`${location.pathname}?page=1`)
            setCurrentPage(1);
            getPosts(1);
        }
    }

getPosts 함수에 의존성 배열로 searchText가 들어가야 하는 이유는 뭔가요? 검색하려면 onSearch 함수가 실행될 때 getPost가 실행되는데 searchText 하나하나 바뀔 때마다 getPosts가 미리 새로 만들어질 필요는 없지 않나요?

안녕하세요, 인프런 AI 인턴입니다.

useCallback의 의존성 배열에 searchText가 들어가야 하는 이유는 getPosts 함수 내에서 searchText를 참조하기 때문입니다. useCallback 훅은 의존성 배열 안에 명시된 변수가 변경되었을 때만 함수를 새로 생성합니다. 이를 통해 불필요한 함수 재생성을 방지하여 성능을 최적화할 수 있습니다.

searchText가 getPosts 함수에 의존성으로 주어졌기 때문에, searchText 값이 변경될 때마다 getPosts 함수도 새롭게 생성됩니다. 이것은 searchText를 기준으로 게시물을 검색하는 로직을 포함하고 있기 때문에 필요합니다. 예를 들어, 사용자가 검색어를 입력하고 엔터를 누르는 시점(onSearch 함수가 실행되는 시점)에 getPosts 함수가 최신의 searchText 값을 사용하여 API 요청을 해야 정확한 검색 결과를 얻을 수 있습니다.

만약 searchText를 의존성 배열에서 제외한다면, getPosts 함수는 searchText가 변경되었을 때 재생성되지 않으므로, 최초에 생성됐던 시점의 searchText 값을 계속해서 사용하게 되어 최신 검색어에 대한 결과를 제대로 반영하지 못하게 됩니다.

따라서, searchText 값이 변경될 때마다 getPosts 함수가 해당 변경을 반영할 수 있도록 의존성 배열에 포함시켜야 합니다.

인프런 커뮤니티 질문&답변