[React] 검색창 만들기 / api 서버로 데이터 받아와서 검색기능

프론트엔드 4 : 서버에서 DB접근해서 가져와서 화면뿌리기(풀스택)

express 어떻게 받고 응답하는지 

서버 동작원리 ,req.params, req.body, req.query

 

--------------------------------------

npx create-react-app react-search-practice

 

 

라우터 다운로드 npm install react-router-dom

App.js 클래스형으로 만들어주기,

components 폴더생성 후 SearchInput.js, Home.js, SearchResult.js 파일생성

 

SearchInput은 상태값을 저장해야하기 때문에 클래스형으로 만들어주기

import '../css/SearchInput.css';
import { Component } from 'react';

class SearchInput extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }
    render(){
        return(
            <div id='search-input'>
                <input type='text'/>
                <button>검색</button>
            </div>
        )
    }

}

export default SearchInput;

 

 

App.js 라우터 설정 해주기 

import './App.css';
import { Component } from 'react';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import SearchInput from './components/SearchInput';
import Home from './components/Home';
import SearchResult from './components/SearchResult';

class App extends Component{
  constructor(props){
    super(props)
    this.state={

    }
  }
  render(){
    return(
      <div id='App'>
        <SearchInput/>
        <BrowserRouter>
          <Routes>
            <Route path='/'   element={<Home/>}/>
            <Route path='/search' element={<SearchResult/>}/>
          </Routes>
        </BrowserRouter>

      </div>
    )
  }
}
export default App;

 

주소로 잘 가는지 확인하기 

이제 버튼 클릭하면 해당 주소로 넘어가도록 SearchInput.js에  onClick 이벤트 걸어주기 

import '../css/SearchInput.css';
import { Component } from 'react';

class SearchInput extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }

    searchItem=()=>{
        window.location.href='/search'
    }

    render(){
        return(
            <div id='search-input'>
                <input type='text'/>
                <button onClick={this.searchItem}>검색</button>
            </div>
        )
    }

}

export default SearchInput;

 

 

입력된 검색값 저장되는지 콘솔 찍어보기

import '../css/SearchInput.css';
import { Component } from 'react';

class SearchInput extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }
    handleQuery=(e)=>{
        console.log(e.target.value)
    }

    searchItem=()=>{
        window.location.href='/search'
    }

    render(){
        return(
            <div id='search-input'>
                <input type='text' onChange={this.handleQuery}/>
                <button onClick={this.searchItem}>검색</button>
            </div>
        )
    }

}

export default SearchInput;

상태값 만들어주고

주소값에 쿼리 뒤에 붙게 해주기 

import '../css/SearchInput.css';
import { Component } from 'react';

class SearchInput extends Component{
    constructor(props){
        super(props)
        this.state={
            query:''
        }
    }
    handleQuery=(e)=>{
        console.log(e.target.value)
        this.setState({
            query:e.tartget.value
        })
    }

    searchItem=()=>{
        const {query} = this.state // 비구조할당
        window.location.href=`/search?query=${query}`
    }

    render(){
        return(
            <div id='search-input'>
                <input type='text' onChange={this.handleQuery}/>
                <button onClick={this.searchItem}>검색</button>
            </div>
        )
    }

}

export default SearchInput;

 

 

SerachResult.js 클래스형으로 바꿔주기 

componentDidMount 함수로 로케이션 객체 콘솔 찍어보기 

href 보면 검색어 입력값이 있음 

import { Component } from 'react';
import '../css/SearchResult.css';

class SearchResult extends Component(){
    constructor(props){
        super(props)
        this.state={

        }
    }
    componentDidMount(){
        //jquery로 치면 ready
        console.log(window.location) //로케이션 객체 찍어보기 로케이션 객체안에 검색어가 있을거임
    }
    render(){
    return(
        <div id='search-result'>
            검색결과
        </div>
        )
    }
}

export default SearchResult;

npm install query-string

다운로드 해주기 

SearchResult 에 임포트 해주기 

 

 

 

yts api 써보기 

npm install axios 다운로드 

SearchResult 에 임포트 해주기 

import { Component } from 'react';
import '../css/SearchResult.css';
import queryString from 'query-string'; // 쿼리스트링 분석해줌
import axios from 'axios';
class SearchResult extends Component(){
    constructor(props){
        super(props)
        this.state={

        }
    }
    componentDidMount(){ //->useEffect
        //jquery로 치면 ready
        console.log(window.location) //object(내용많음) //로케이션 객체 찍어보기 로케이션 객체안에 검색어가 있을거임
        console.log(window.location.href)//http://localhost:3000/search?query=hello%ei=utf-8
        console.log(window.location.search)//?query=hello%ei=utf-8

       const queryObj = queryString.parse(window.location.search)//?query=hello%ei=utf-8
       console.log(queryObj)//{id: 'utf-8', query:'hello'}
       console.log(queryObj.query)//'hello'
       //'hello' ->
       //https://yts.mx/api/v2/list_movies.json
       //https://yts.mx/api/v2/list_movies.json?query_term=${query}
       this.getMovieData(queryObj.query)
    }
    getMovieData=async(query)=>{
        const result 
        = await axios.get(`https://yts.mx/api/v2/list_movies.json?query_term=${query}`)
        console.log(result) //avatar 검색누르고 콘솔에 객체 열어서 data 넘어온거 확인하기 
    }
    render(){
    return(
        <div id='search-result'>
            검색결과
        </div>
        )
    }
}

export default SearchResult;

 

검색창에 avatar 입력하고 검색누르면 콘솔창에 data 날아옴

**콘솔창에 두번 날아오는데, index.js 에 스트릿모드 지워주기 

 

<React.StrictMode>

 

dog, weather api 도 써보기 

 

 

import { Component } from 'react';
import '../css/SearchResult.css';
import queryString from 'query-string'; // 쿼리스트링 분석해줌
import axios from 'axios';
class SearchResult extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }
    componentDidMount(){ //->useEffect
        //jquery로 치면 ready
        console.log(window.location) //object(내용많음) //로케이션 객체 찍어보기 로케이션 객체안에 검색어가 있을거임
        console.log(window.location.href)//http://localhost:3000/search?query=hello%ei=utf-8
        console.log(window.location.search)//?query=hello%ei=utf-8

       const queryObj = queryString.parse(window.location.search)//?query=hello%ei=utf-8
       console.log(queryObj)//{id: 'utf-8', query:'hello'}
       console.log(queryObj.query)//'hello'
       //'hello' ->
       //https://yts.mx/api/v2/list_movies.json
       //https://yts.mx/api/v2/list_movies.json?query_term=${query}


    //    this.getMovieData(queryObj.query)
       this.getDogData(queryObj.query)
    //    this.getWeatherData(queryObj.query)
    }
    getMovieData=async(query)=>{
        const result 
        = await axios.get(`https://yts.mx/api/v2/list_movies.json?query_term=${query}`)
        console.log(result) //avatar 검색누르고 콘솔에 객체 열어서 data 넘어온거 확인하기 

        console.log(result.data.data.movies) // Array(4)
    }

    getDogData = async(query) =>{
        const result
        =await axios.get(`https://dog.ceo/api/breed/${query}/images/random`)
        console.log(result) //Object
        console.log(result.data.message)
    }
    getWeatherData = async(query) =>{
        const result
        =await axios.get(``)
        console.log(result) //Object
    }
    render(){
    return(
        <div id='search-result'>
            검색결과
        </div>
        )
    }
}

export default SearchResult;