react에서 검색 구현하기

react에서 검색을 구현할 때는 사용자가 입력한 값을 기반으로 URL을 변경하는 방식으로 동작해야 한다. 이를 구현하기 위해서는 아래의 절차를 따라야 한다.

1. 상태(state) 관리: 사용자가 입력한 검색어를 상태로 관리함.
2. 이벤트 처리: 버튼을 클릭했을 때 입력한 검색어를 사용하여 URL을 변경함.

import React, {useState} from 'react';
import { Link, useHistory } from 'react-router-dom';

const [searchTerm, setSearchTerm] = useState('');
const history = useHistory();
const handleSearchChange = (event) => {
    setSearchTerm(event.target.value);
};

// 버튼을 눌렀을 때 검색이 되는 것
const handleSearchSubmit = () => {
    history.push(`/search/${searchTerm}`);
}; 

// [Enter]를 눌렀을 때 검색이 되는 것
const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
        history.push(`/search/${searchTerm}`);
    }
};
...
<input className='search' type='text' value={searchTerm} onChange={handleSearchChange} onKeyDown={handleKeyDown} />

위의 코드는 function 내에서 사용해야 한다.

이렇게 해서 실행하려 했더니 useHistory가 없단다...

react-router-dom의 버전이 업그레이드되면서 useHistory에서 useNavigate로 바뀌었다!

최종적으로 아래의 코드로 변경하였다.

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';

const [searchTerm, setSearchTerm] = useState('');
const navigate = useNavigate();
const handleSearchChange = (event) => {
     setSearchTerm(event.target.value);
};

// 버튼을 눌렀을 때 검색이 되는 것
const handleSearchSubmit = () => {
     navigate(`/search/${searchTerm}`);
};

// [Enter]를 눌렀을 때 검색이 되는 것
const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
        navigate(`/search/${searchTerm}`);
    }
};