THE MOVIE DB API를 이용한 리액트 프로젝트 - 01

https://www.themoviedb.org/?language=ko-KR 에서 제공하는 API를 사용하여 리액트 프로젝트를 진행해보려고 합니다.

API 호출 후 상태 관리는 redux를 사용할 예정입니다.

프로젝트 생성 및 라이브러리 설치

$ yarn add redux react-redux react-router-dom

```

#### Axios
axios는 가장 인기 있는 자바스크립트 HTTP 클라이언트 입니다.
이 라이브러리는 HTTP 요청을 Promise 기반으로 async/await문법을 사용하여 쉽게 XHR 요청을 할 수 있습니다
```
$ yarn add axios

```

API를 요청하기 위해서는 api_key 값이 필요합니다.
https://www.themoviedb.org/?language=ko-KR
회원가입을 진행하고 계정 설정 > API 메뉴에서 발급이 가능합니다.

별도의 폴더 안에 API를 호출하는 함수를 작성했습니다. 나중에 리덕스 모듈에서 이 함수를 사용할 예정입니다.
```
// src/lib/movieAPI.js
import axios from 'axios';

const key = "xxxxx";
const url = `https://api.themoviedb.org/3/movie/now_playing?api_key=${key}&language=ko&page=1&region=KR`; // 현재 상영 영화 정보 KR

export const getMovies = () =>{
    let res = axios.get(`${url}`);
    return res;
}
```


애플리케이션의 규모가 크지 않다면 굳이 리덕스를 사용하지 않아도 되지만 리덕스 공부를 위해 리덕스를 사용하여 상태 관리를 해보겠습니다.

리덕스를 사용하기 위해서는 리덕스 관련 코드를 작성해야 합니다. 보통 액션 타입, 액션 생성 함수, 리듀서 코드와 같은 코드들을 각각 다른 파일에 작성하거나, 기능별로 묶어서 파일 하나에 작성합니다.

저는 하나의 파일에 묶어서 작성해보겠습니다. (Ducks 패턴)
handleActions hook을 사용하기 위해서 redux-actions 라이브러리를 설치했습니다.

또한 API 요청에 대한 상태(요청 시작, 성공, 실패)를 관리하기 위해 redux-thunk 미들웨어를 사용하겠습니다. 

```
/// src/module/movie.js
import * as movieAPI from '../lib/movieAPI';
import { handleActions } from 'redux-actions';

// Action type
const GET_MOVIES = 'movie/GET_MOVIES';
const GET_MOVIES_SUCCESS = 'movie/GET_MOVIES_SUCCESS';
const GET_MOVIES_FAILURE = 'movie/GET_MOVIES_FAILURE';

// thunk 함수, 함수 내부에서 시작할 때, 성공할 때, 실패했을 때
// 서로 다른 액션을 디스패치 함.
// thunk 함수는 기존의 액션 생성 함수에서 일반 액션 객체를 반환하는 대신 함수를
// (dispatch) 반환 합니다.
export const getMovies = () => async dispatch => {
    dispatch({ type: GET_MOVIES }); // 요청 시작
    try {
        const res = await movieAPI.getMovies();
        dispatch({
            type: GET_MOVIES_SUCCESS, // 요청 성공
            payload: res.data.results // API 호출 결과 값
        })
    } catch (e) {
        dispatch({
            type: GET_MOVIES_FAILURE, // 요청 실패
            payload: e,
            error: true,
        });
        throw e;
    }
};

// 초기 설정
const initialState = {
    movieList : null,
    error: false,
}
// 리듀서
const movie = handleActions(
    {
        [GET_MOVIES] : (state) => ({
            ...state,
            // loading...
        }),
        [GET_MOVIES_SUCCESS] : (state, action) => ({
            ...state,
            movieList : action.payload,
        }),
        [GET_MOVIES_FAILURE] : (state) => ({
            ...state,
        })
    },
    initialState
)

export default movie;
```
루트 리듀서 생성, 스토어 생성, 프로젝트 리덕스 적용, redux-devtools-extension 설치 & 적용, redux-logger 설치 & 적용했습니다.

```
// src/index.js
...
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './module/root';
import thunk from 'redux-thunk';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';

const logger = createLogger();
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(rootReducer, composeEnhancer(applyMiddleware(thunk, logger)));

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('root'),
);

serviceWorker.unregister();

```

MovieContainer 컴포넌트를 작성하고 렌더링 해보았습니다.
![11.JPG](https://velog.velcdn.com/post-images%2Fksh4820%2F9662ef70-48b8-11ea-820b-8deeeb976fdb%2F11.JPG)
redux-Devtools에서 발생한 액션과 상태 값을 확인할 수 있습니다.

다음 글에서는 API에서 받아 온 데이터들을 활용해보겠습니다.