[React/Trouble-Shooting] Input 입력 후 엔터했을 때 다른 페이지로 전환하기

ZenTechie·2023년 3월 26일

Troubleshooting

목록 보기

5/9

컴포넌트 구조부터...

언급이 될 컴포넌트는 다음과 같다.
Home : 메인 화면(Searchbar의 부모 컴포넌트)
Searchbar : 검색 창 담당, 즉 Input을 가지고 있음
Searchresult : 검색한 결과를 보여주는 화면

어떻게 작동하는가?

이 3가지의 컴포넌트의 작동 방식을 보자.

먼저 Input을 담당하는 Searchbar에서 특정 키워드로 검색을 하고 Enter를 누르면, 해당 키워드가 Home으로 전달된다.(부모-자식 컴포넌트 통신)

이때, Home에서 해당 키워드를 Searchresult에 전달을 한다.
그러면 Searchresult에서 해당 키워드를 가지고 TMDB Api호출을 한다.

결과적으로, Api 호출의 결과가 화면에 뜨게 된다!
(여기서 Searchresult로 라우팅을 할 때, url뒤에 키워드(keyword)를 붙인 경로로 이동할 수 있게 했다. 아래를 보자!)

url 예시

<Route path="/search/:keyword" element={<SearchResult />} />

url에 붙인 키워드로 Api 호출은 어떻게?

// Searchresult.js

const SearchResult = (props) => {
  	// ... 부분 생략1
	const { keyword } = useParams();
    // ... 부분 생략2
};

useParams()를 사용하면 url에 붙여진 keyword를 떼올 수 있다!

어떻게 만드나?

Searchbar.js

const Searchbar = (props) => {
  const [enteredKeyword, setEnteredKeyword] = useState("");

  const changeHandler = (e) => {
    e.preventDefault();
    setEnteredKeyword(e.target.value);
  };

  const enterHandler = (e) => {
    if (e.keyCode === 13) {
      props.searchHandler(enteredKeyword, e.keyCode);
      setEnteredKeyword("");
    }
  };
  return (
      <Input
          type="text"
          placeholder="Search here..."
          onChange={changeHandler}
          onKeyDown={enterHandler}
      />
  );
};

changeHandler : Input 필드에 입력되는 값 감지해서 state로 저장한다.
enterHandler : 키 다운 즉, enter를 입력했는지를 감지한다.

그리고 "Input 필드에 입력한 값"과 "e.keyCode"(= Enter의 키 코드 값)을 가지고 props로 주어진 props.searchHandler를 호출한다.

App.js

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/search/:keyword" element={<SearchResult />} />
      </Routes>
    </BrowserRouter>
  );
};

Home.js

const Home = (props) => {
  // ...부분 생략
  const navigate = useNavigate();
  
  const searchHandler = (enteredKeyword, enteredKeyCode) => {
    if (enteredKeyword.trim().length !== 0 && enteredKeyCode === 13) {
      routePageHandler(enteredKeyword);
    }
  };
  
  const routePageHandler = (enteredKeyword) => {
    navigate(`/search/${enteredKeyword}`);
  };
  
  // ...부분 생략2
  
  return (
    // ... 부분 생략3
    <Searchbar searchHandler={searchHandler} />
	// ... 부분 생략4
  );
}

searchHandler : Searchbar 컴포넌트에 props로 전달한다.(부모-자식 컴포넌트 통신에 사용되는 함수)
enteredKeyword : Searchbar 컴포넌트에서 얻은 "Input 필드 입력 값"
routePageHandler : 입력 값을 url에 넣어서 navigate(...) 호출

핵심은 useNavigate() 함수이다.
아마 React Router v5 까지는 useHistory()를 사용했는데,
v6로 올라오면서 useNavigate()로 바뀌었다고 한다.

어쨌든 이동하고자 하는 url을 navigate()함수 안에 넣어서 호출하면 된다.(아마도 App.js내의 Route path와 동일하게 해줘야 할 듯?)