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

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

제공해주신 정보와는 별개로 검색창 초기화 기능에 대해 답변드리겠습니다.

React에서 입력 폼의 상태 관리를 위해서는 보통 useState Hook을 사용합니다. 검색창의 상태(state)와 이를 업데이트하는 함수(setState)를 정의하고, 검색을 수행한 뒤에는 해당 함수를 이용하여 검색창의 상태를 빈 문자열로 설정함으로써 검색창을 초기화할 수 있습니다.

예를 들어, 검색창의 상태를 관리하는 searchQuery와 이를 업데이트하는 setSearchQuery 함수를 갖고 있다고 가정할 때, 영화 상세페이지로 이동 후 검색창을 초기화하기 위해서는 아래와 같은 방식으로 setSearchQuery('')를 호출하여 검색창의 상태를 빈 문자열로 업데이트할 수 있습니다.

const [searchQuery, setSearchQuery] = useState("");

// 영화 항목 클릭 시 실행되는 함수
function handleMovieClick() {
  // 여기에 상세 페이지로 이동하는 로직 추가

  // 검색창 초기화
  setSearchQuery("");
}

이와 같이 검색창이 포함된 컴포넌트 내나 혹은 상위 컴포넌트에서 상태 관리를 통해, 사용자가 다른 페이지로 이동할 때 검색창의 상태를 초기화할 수 있습니다.

원하는 답변을 찾지 못하셨나요?
그럼 우측 하단의 ‘문의하기’ 에서 직접 문의해주세요.
최대한 빠르게 답변드리도록 하겠습니다!