React.js & Node.js 12 : 영화/책 검색 사이트, React Router, Atomic Design Pattern

1. React Router

2. Axios(API 통신)

3. Atomic Design Pattern

4. CORS proxy

5. Pagination

```

npm i axios styled-components react-router-dom

```

1. React Router

react router은 페이지와 관련된 기능을 수행한다.

import { BrowserRouter, Routes, Route } from "react-router-dom";

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

export default Router;

ㅇ  위와같이 작성하면 라우터가 페이지에 맞추어서 실행시키어준다.

 

BrowserRouter : 이건 라우터의 종류를 나타낸다. 이거외에도 HashRouter 같은것도 있다. 

 

그래고  Route의 path는 어떤 주소에서 element를 보여준다는 것이고 이것들을 모아놓은 것이 Routes이다.

이제 element에 넣을 것이 components 폴더에 들어가는 것이다. 그리고 만드는 과정에서 Atomic Design이라고 불리우는 재사용성이 높은 디자인을 따를 것이다.

 

Atomic Design (brunch.co.kr)

Atomic Design

그래서 위와같이 4개로 분류해서 우리의 컴포넌트를 제작해야한다.

 

Atoms : 가장 작은 단위의 컴포넌트 : html 태그 하나정도

Molecules : 두 개 이상의 컴포넌트들로 이루어진 컴포넌트 : Atoms 두개 이상인거

Organisms : 큰 단위의 재사용

Pages : 가장 큰 단위 - 그냥 전체페이지

 

이건 그냥 분류체계이기 때문에 어떻게 나누겠냐는 주관적인 것이다.

 

pages에 있는 것들을 모두 묶는 index.js를 따로 만들어서 얘를 Router에 import 해준다.

위와같이 작성해주면 받아오는 동시에 바로 export 해줄 수 있다.

 

그럼 Router에서는 가져올때 위와같이 구조분해가 가능해진다. 보면 페이지만 적어주었음에도 index.js를 적어주기 때문에 조금 더 보기 좋아진다.

 

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

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

const Wrapper = styled.div`
  display: flex;
  align-items: center;
  margin-top: 60px;
  flex-direction: column;
`;

const BtnLink = styled.button`
  margin: 20px;
  width: 300px;
  height: 100px;
  font-size: 20px;
  background-color: #fff;
  border-radius: 4px;
  border: 2px solid #ddd;
`;

export default Main;

React-Router에서는 a태그를 쓰지 않고 Link 컴포넌트를 사용하게 된다. a태그를 쓰지 않는 이유는 a를 쓰면 페이지 전체가 재 렌더링된다. 하지만 Link를 쓰면 컴포넌트만 재 렌더링된다. 그래서 React-Router은 컴포넌트를 교체할 뿐이기 때문에 보다 효율적으로 작동할 수 있다.

 

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

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

const Form = styled.form`
  display: flex;
  padding: 10px;
`;
const InputText = styled.input`
  flex: 1;
  margin-right: 10px;
`;
const BtnSubmit = styled.button``;

export default Movie;

그냥 영화 창을 띄워주는 부분

 

 

 

import styled from "styled-components";

const MovieList = () => {
  return (
    <List>
      <Item>
        <Image src="https://upload.wikimedia.org/wikipedia/ko/f/f2/%EC%96%B4%EB%B2%A4%EC%A0%B8%EC%8A%A4-_%EC%97%94%EB%93%9C%EA%B2%8C%EC%9E%84_%ED%8F%AC%EC%8A%A4%ED%84%B0.jpg" />
        <Title>어벤져스</Title>
        <PubDate>2020</PubDate>
        <UserRating>4.5</UserRating>
      </Item>
      <Item>
        <Image src="https://upload.wikimedia.org/wikipedia/ko/9/92/%EC%96%B4%EB%B2%A4%EC%A0%B8%EC%8A%A4_%EC%9D%B8%ED%94%BC%EB%8B%88%ED%8B%B0_%EC%9B%8C.jpg" />
        <Title>어벤져스</Title>
        <PubDate>2020</PubDate>
        <UserRating>4.5</UserRating>
      </Item>
    </List>
  );
};

const List = styled.ul`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
`;
const Item = styled.li``;
const Image = styled.img`
  width: 100%;
`;
const Title = styled.p``;
const PubDate = styled.span``;
const UserRating = styled.span``;

export default MovieList;

영화 세부정보를 보여주는 부분

 

 

TopNav도 만들자

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

const TopNav = () => {
  return (
    <Container>
      <Nav>
        <Link to="/">
          <LinkItem>메인</LinkItem>
        </Link>
        <Link to="/movie">
          <LinkItem>영화</LinkItem>
        </Link>
        <Link to="/book">
          <LinkItem>책</LinkItem>
        </Link>
      </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 Nav = styled.nav`
  display: flex;
  align-items: center;
  text-decoration: none;
`;

const LinkItem = styled.div`
  margin: 0 10px;
  padding: 10px;
`;

export default TopNav;

그다음 organism으로 사용할 top-nav를 만들어주자. 그런데  top-nav를 모든 컴포넌트에 쓰는 것은 무리수이고 Router에서 항시 나올 수 있게 선언해주자.

 

naver open api - Google 검색

naver open api - Google 검색