React | SearchBar 만들기!

새니·2023년 9월 1일

목록 보기

2/2

SearchBar도 서버에 저장된 레시피의 title의 값을 전송하여 출력해야하기 때문에 axios방식으로 코드를 작성하였다!

input의 ref속성을 사용하면 컴포넌트의 상태와 상관없이 DOM요소에 직접 접근 할 수 있기때문에 특정 DOM요소의 값을 읽어오거나 변경하는 등의 작읍을 할때 유용하다!
inputRef를 생성하고 해당 Ref를 input요소의 ref속에서 할당하면 inputRef.current는 해당 input요소를 가리키게 된다!

inputRef.current.value = 해당 input 요소의 value 속성

const onSearch = () => {
        const  searchText = inputRef.current.value;
         // ref를 이용해 검색어를 가져온다
        if(searchText){
            axios.get(`http://localhost:5000/recipe?query=${searchText}`)
                .then((response) => {
                    // 검색 결과에 따라 페이지를 전환합니다.
                    if (response.data.length > 0) {
                        // 검색 결과가 있으면 검색 결과 페이지로 이동합니다.
                        //window.location.href = `/search?query=${searchText}`;
                        alert(`${searchText}가 검색되었습니다.`);
                    } else {
                        // 검색 결과가 없으면 검색 결과가 없는 페이지로 이동합니다.
                        //window.location.href = '/no-result';
                        alert('검색결과가 없습니다');
                    }
                })
                .catch((error) => {
                    // 오류가 발생한 경우에는 오류 페이지로 이동합니다.
                   alert('페이지 오류');
                });
        }
        inputRef.current.value = ''; 
  		//검색 완료 후엔 다시 value값을 공백으로 설정. 
    };



    return (
            //onSubmit속성은 form태그 안에서만 사용가능하다
            //이 속성을 사용하면 새로고침없이
          <div className='searchBox'>

                <input type="text"
                       placeholder='레시피 검색'
                       ref={inputRef}
                       className='searchInput'
                />

                <button
                    onClick={onSearch}
                    id='search-Btn'>
                    <img src='/images/searchImage.png' alt='search icon' className='search-Img'/>
                </button>


            </div>
    );
};

export default SearchBar;

searchBar.css 작성

.searchInput{
    width: 700px;
    height: 35px;
    border-radius: 5px;
    border: 1px solid #999999;
}
.searchInput{
    font-size: 25px;
    font-weight: 100;
    padding: 5px;
    text-align: center;
}
.searchInput:focus{
    outline: 1.5px solid #999999;
}
.searchInput:focus::placeholder {
    color: transparent;
}
.searchBox{
    position: relative;
    width: 700px;
    display: flex;
    margin: 0 auto;
    margin-top: 20px;
}
.search-Img{
    height: 30px;
}
.search-Img:hover{
    filter: invert(62%) sepia(87%) saturate(275%) hue-rotate(344deg) brightness(102%) contrast(98%);
}
#search-Btn{
    border: none;
    background-color: #ffffff;
    position: absolute;
    right: 15px;
    top: 7px;
    cursor: pointer;
}