[React]커스텀 훅의 업데이트가 함수형 컴포넌트에 반영되지 않을 때

에러 원인:

 

커스텀 훅 useSearchReviews의 함수인 handleSearch 함수가 인수를 받지 않고,

 

내부의 setSearchResults 함수를 사용하여 상태를 업데이트함.

 

따라서, Board 컴포넌트의 searchResults 상태가 업데이트되지 않았다.!

 

 

---

에러 내용 :

 

커스텀 훅이 검색기능을 갖고 있고 

 

이 결과를 컴포넌트에 불러와서 결과값을 보여지게 하는 것이 목표였다.

 

커스텀 훅 파일에서 console log로 확인한 결과 업데이트에 이상 무!

 

하지만 컴포넌트에서는 계속 업데이트가 되지 않고 값이 빈 배열로 리턴되었다;;

 

 

우선 나의 디렉토리!!

---

Board - 게시판 페이지를 구성하는 메인 컴포넌트

 

 

이 컴포넌트는 페이지 상단에 이미지와 '글 쓰러 가기' 링크를 표시하며, Search 컴포넌트를 렌더링하고, 검색 결과 또는 전체 리뷰 목록을 그리드 형식으로 표시

 

또한 사용자가 더 많은 리뷰를 불러올 수 있는 '더 보기' 버튼을 제공

---

 

Search - 검색 기능을 제공하는 컴포넌트.

 

 

사용자가 키워드로 검색하거나 도서명으로 검색할 수 있는 드롭다운 메뉴를 포함하며, 입력된 검색어를 사용하여 검색을 수행할 수 있는 검색 버튼이 있음

 

검색이 완료되면 결과를 전달된 setSearchResults 함수를 사용하여 설정하고, 검색이 수행되었음을 나타내는 setHasSearched 함수를 호출

---

 

useSearchReview -  검색에 필요한 상태와 로직을 관리하는 커스텀 훅

 

검색 제목, 검색 키워드, 검색 결과, 검색 오류 및 검색 여부와 관련된 상태를 관리

handleSearch 함수를 제공하여 데이터베이스에서 검색을 수행하고, 검색 결과를 설정하며, 검색 오류 발생 시 오류 메시지를 설정

---

문제 해결:

 

1. 먼저, useSearchReviews 커스텀 훅 내의 handleSearch 함수를 수정함.

  함수를 async로 만들고, setSearchResults 인수를 받도록 했다.

const handleSearch = async (setSearchResults) => {
  // ...
  const results = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
  setSearchResults(results); // 외부에서 전달된 setSearchResults를 사용.
  // ...
};

 

2. 이제 Search 컴포넌트에서 handleSubmit 함수에서 수정한 handleSearch 함수를 호출할 때,

Board 컴포넌트에서 전달한 setSearchResults 함수를 인수로 전달!

const handleSubmit = async (event) => {
  event.preventDefault();
  startLoading();
  await handleSearch(setSearchResults); // Board 컴포넌트로부터 받은 setSearchResults를 인수로 전달.
  stopLoading();
  setHasSearched(true);
};

이렇게 수정하면, 검색 결과를 가져올 때 Board 컴포넌트의 searchResults 상태가 올바르게 업데이트된다.

따라서, 검색이 완료되면 사용자에게 검색 결과가 표시됨.

 

Board 컴포넌트의 searchResults 상태가 

useSearchReviews 커스텀 훅의 handleSearch 함수에 의해 업데이트되도록 했으며, 

이로 인해 검색 결과가 페이지에 표시되로록 했다.

---

에러 해결하면서 배운 점 :

 

함수의 인수 전달을 통해서 각 컴포넌트에서 업데이트가 원활하게 일어나도록 하자!