[모각코] ReactJS 프로젝트 시작하기(4)- 검색기능 | 스크랩기능 구현하기

이번시간에는 계속 미루던 두 핵심기능을 구현해보았다ㅎ-ㅎ

 

검색기능

검색기능의 경우 백엔드에서 api를 만들어줘서 연결하는방법밖에 모르고있었는데

리액트 자체적으로 만들수있는 구현방법을 시도해보았다.

첫번째시도) input 태그에서 받은 입력값 다루기

먼저 사용자가 작성해준 검색키워드, 즉 입력값을 변수로 빼줘야한다.

위와 같이 Search태그로 감싸져있는게 검색창 관련태그인데 이 받은 value값을 search 변수라고 선언해준다

const [search , setSearch] = useState("");
const onChangeSearch =(e)=>{
        e.preventDefault();
        setSearch(e.target.value);
    }

위의 코드까지 덧붙여주면 사용자 입력값을 search로 선언해줄수있다-!

 

근데 이렇게했을때 search를 컴포넌트의 인자값으로 전달해주려했는데 이벤트에는 컴포넌트 등록이 불가했다.

그래서 useForm 훅을 써서 시도해보았다!

 

이렇게 사용하는 방식인데 사실 아직 훅개념을 제대로 알지못해서 직관적으로 이해는 되지않았고 코드를 적용하는데 조금 어려움이있었다.

그다음에는 Search.js 파일을 따로 파서 아래와같이 작성해주었다.

 const location = useLocation();
    const {cate} = useParams();
    const userInput = new URLSearchParams(location.search).get("keyword");
    const filtered = data.apiList.filter((itemList) => {
      return itemList.name.toUpperCase().includes(userInput.toUpperCase());
    });
    const match = useMatch(`/${cate}`);
    return (
    <Wrap>
        <Category>
            {filtered.map((itemList) => 
            <div key = {itemList.key}isActive = {match !== null}>
                <CategoryBox 
                index = {itemList.key}
                name = {itemList.name}
                bCategory = {itemList.bCategory}
                bLocation = {itemList.bLocation}
                hastag = {itemList.hashtag}
                />
       </div>
       )}
        </Category>  
    </Wrap>

useLocation훅으로 이동한 주소를 가져와주고, 거기서 사용자의 input값을 받아냈다

검색결과를 만들어내는데에는 리액트의 filter와 match 기능을 사용했다.