useState의 비동기적 동작

문제점

updateSearchTerm 함수는 사용자가 키보드로 입력한 값을 받아와서 그 값으로 post 요청을 보내는 함수인데

 

서버쪽에 요청값 중 searchTerm이 자꾸 이전 값으로 들어오는 것이었다. 

 

 

... 생략

const [SearchTerm, setSearchTerm] = useState('')



useEffect(() => {
    const body = {
      skip: Skip,
      limit: Limit,
    }

    getProducts(body)
  }, [])



const updateSearchTerm = (newSearchTerm) => {
    const body = {
      skip: 0,
      limit: Limit,
      filters: Filters,
      searchTerm: SearchTerm,
    }

    setSkip(0)
    setSearchTerm(newSearchTerm)
    getProducts(body)
  }
  
 ... 생략

 

 

 

해결책

리액트는 state 값이 바뀔 때 리렌더링이 되면서 바뀐 state가 반영 되는데, useEffect Hook에서 변화를 감지하고자 하는 값을 두 번째 인자로 넣어 searchTerm이 바뀔 때 조회 하도록 하면 된다.

 

useEffect(() => {
    const body = {
      skip: Skip,
      limit: Limit,
      searchTerm: SearchTerm,
    }

    getProducts(body)
  }, [SearchTerm])