[REACT] Naver 책 검색

 

Naver 영화 검색

 

 

🎣 1. Router.js 생성

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Main from './components/pages/Main'
import Movie from './components/pages/Movie'
import Book from './components/pages/Book'

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/movie" element={<Movie />} />
        <Route path="/book" element={<Book />} />
      </Routes>
    </BrowserRouter>
  )
}

export default Router

🎣 2. Main.jsx

import { Link } from 'react-router-dom'
import styled from 'styled-components'

const Main = () => {
  return (
    <Wrapper>
      <PageTitle>영화 🎬 & 책 📚 검색</PageTitle>
      <Link to="/Movie">
        <Button>영화 🎬</Button>
      </Link>
      <Link to="/Book">
        <Button>책 📚</Button>
      </Link>
    </Wrapper>
  )
}

const Wrapper = styled.div`
  padding: 15px;
`
const PageTitle = styled.h2`
  text-align: center;
`
const Button = styled.button`
  width: 100%;
  margin: 10px 0;
  height: 100px;
  font-size: 24px;
  border: none;
  border-radius: 4px;
`

export default Main

🎣 3. Book.jsx

import { useState } from 'react'
import styled from 'styled-components'
import { getBookList } from '../../apis'
import BookList from '../organisms/BookList'

const Book = () => {
  const [text, setText] = useState('')
  const [bookList, setBookList] = useState([])

  const handleSubmit = async (e) => {
    e.preventDefault()

    const { items } = await getBookList({ query: text })
    setBookList(items)
  }

  return (
    <Wrapper>
      <PageTitle>📚 BOOK 📚</PageTitle>
      <Form onSubmit={handleSubmit}>
        <InputText
          placeholder="search"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <BtnSubmit>검색</BtnSubmit>
      </Form>
      <BookList data={bookList} />
    </Wrapper>
  )
}

const Wrapper = styled.div``
const PageTitle = styled.h2``
const Form = styled.form`
  display: flex;
  padding: 15px;
`
const InputText = styled.input`
  flex: 1;
  margin-right: 15px;
`
const BtnSubmit = styled.button``

export default Book

🎣 3-1. BookList.jsx

import styled from 'styled-components'

const BookList = ({ data }) => {
  return (
    <List>
      {data.map(({ image, title }) => (
        <Item key={image}>
          <Thumbnail src={image} />
          <Title dangerouslySetInnerHTML={{ __html: title }} />
        </Item>
      ))}
    </List>
  )
}

const List = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 15px;
`
const Item = styled.div``
const Thumbnail = styled.img`
  width: 100%;
`
const Title = styled.span``

export default BookList

🎣 3-2. src>apis>index.js 파일생성

import axios from 'axios'

export const getBookList = async (params) => {
  const { data } = await axios.get('/v1/search/book.json', {
    headers: {
      'X-Naver-Client-Id': 'ID',
      'X-Naver-Client-Secret': 'PW',
    },
    params,
  })

  return data
}

📌 서버를 만들수 없으니 package.json 에서
"proxy": "https://openapi.naver.com" 추가해주기

 

proxy 는 개발과정에서만 사용가능. 배포 할때는 서버 필요함.
(즉, 연습때만 사용할수 있음) 📌