REACT : Naver API를 활용한 사이트 만들기

```

npm i axios styled-components react-router-dom qs

```

 

1. 라우터 설정하기

2. 컴포넌트 만들어서 import 하기

default 속성들도 미리 넣어놓자

 

3. Main 컴포넌트

import { Link } from "react-router-dom";
import styled from "styled-components";
import { Title } from "../atoms/index";

const Main = () => {
  return (
    <>
      <Title>영화 & 책 검색 사이트</Title>
      <Wrapper>
        <Link to="/movie">
          <BtnLink>영화 검색</BtnLink>
        </Link>
        <Link to="/book">
          <BtnLink>책 검색</BtnLink>
        </Link>
      </Wrapper>
    </>
  );
};

const Wrapper = styled.div`
  //위치
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60px;
  //크기
  //꾸미기
`;
const BtnLink = styled.button`
  //위치
  margin: 20px;
  width: 300px;
  height: 100px;
  //크기
  font-size: 1.5rem;
  //꾸미기
  background-color: #fff;
  border: 1px solid black;
  cursor: pointer;
  border-radius: 4px;
`;

export default Main;

 

4. Movie 컴포넌트

 

 

이번에야말로 CSS Grid를 익혀보자 – 1분코딩 (studiomeal.com)

이번에야말로 CSS Grid를 익혀보자

CSS, 반응형 웹 하루만에 정리하기 (velog.io)

CSS, 반응형 웹 하루만에 정리하기

나도 grid가 뭔지 모른다.

 

.conatiner {
	display : grid;
    /* display : inline-grid; */
    grid-template-columns: 200px 200px 500px;
	/* grid-template-columns: 1fr 1fr 1fr : 비율대로 놓겠다*/
}

import styled from "styled-components";
import { Title } from "../atoms/index";
import MovieList from "../organisms/MovieList";

const Movie = () => {
  return (
    <div>
      <Title>Movie</Title>
      <Form>
        <InputText />
        <BtnSubmit>검색</BtnSubmit>
      </Form>
      <MovieList />
    </div>
  );
};

const Form = styled.form`
  //위치
  margin-top: 5%;
  display: flex;
  //크기
  //꾸미기
  border: 1px solid #22b8cf;
  border-radius: 5px;
`;
const InputText = styled.input`
  //위치
  padding: 5px;
  background-color: white;
  background: none;
  outline: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1.5;
  flex: 1;
`;
const BtnSubmit = styled.button`
  background: none;
  outline: none;
  border: none;
  background-color: #22bfff;
  color: white;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.1s background ease-in;
  &:hover {
    background-color: #adb5bd;
  }
`;

export default Movie;

 

 

 

대충 위와같이 작성하는데 주의해야하는 것은 Image에 크기를 반드시 넣어주자

 

5. TopNav 작성하기

 

보면 알겠지만 Link와 NavLink는 다름

 

구조는 위와같이

Container

  Nav

    NavLink

순으로 들어가야 됨

 

import styled from "styled-components";
import { NavLink } from "react-router-dom";

const NavItems = [
  { link: "/", name: "메인" },
  { link: "/movie", name: "영화" },
  { link: "/book", name: "책" },
];

const TopNav = () => {
  return (
    <Container>
      <Nav>
        {NavItems.map(({ link, name }) => (
          <CustomeLink to={link}>
            <LinkItem>{name}</LinkItem>
          </CustomeLink>
        ))}
      </Nav>
    </Container>
  );
};

const Container = styled.div`
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 50px;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
`;
const CustomeLink = styled(NavLink)`
  &.active {
    background-color: black;
    color: white;
  }
`;

const Nav = styled.nav`
  display: flex;
  align-items: center;
`;
const LinkItem = styled.div`
  margin: 10px 15px;
`;

export default TopNav;

 

5. 이제 Movie 안의 내용 채우기

 

 

 

6. Movie 안의 내용 채우고 함께 네이버 API 받아오기

만들고 보니 데이터를 받아와야겠다

 

데이터가 잘 온다

 

이걸로 apis는 완성이다

import axios from "../../node_modules/axios/index";

export const Instance = axios.create({
  headers: {
    "X-Naver-Client-Id": "--------------------",
    "X-Naver-Client-Secret": "--------------------",
  },
});

import { Instance } from "./index";

const getMovieList = async (params) => {
  const { data } = await Instance.get("/v1/search/movie.json", { params });
  console.log(data);
  return data;
};

export default getMovieList;

 

 

이제 데이터들을 Movie List로 보내주자

 

Title 안에 dangerouslySetInnerHTML을 붙여주어야 한다. 그래서 JS를 실행할 수 있는 가능성이 생기기 떄문에 이렇게 쓰는 것은 유의해야한다.