초보자의 React.js (3) - CRUD[READ]

김문범·2020년 5월 25일
0

Beginner-React

목록 보기
3/6
post-thumbnail

API 통신을 이용한 CRUD를 해보겠습니다.

예를 들어 category라는 학년 및 학기를 관리하는 하나의 components를 만들도록 하겠습니다. 파일구조는 제가 부장님에게 배운 방식으로 하다보니 마음에 들지 않는 다면 다른 방식으로 사용하셔도 무방합니다. import만 주의하세요. ^^

1. READ

1-1. constants.js

먼저, store 폴더 밑에 category라는 폴더를 생성합니다.
그리고, constants.js라는 파일을 생성합니다.
이 파일은 action의 type을 모아둔 파일입니다.

export const CATE_READ = 'CATE_READ';
export const CATE_INSERT = 'CATE_INSERT';
export const CATE_UPDATE = 'CATE_UPDATE';
export const CATE_DELETE = 'CATE_DELETE';

1-2. actions.js

다시 category라는 폴더에 actions.js라는 파일은 생성합니다.

import {CATE_READ, CATE_INSERT, CATE_UPDATE, CATE_DELETE} from "./constants";

export const categoryRead = () => ({
    type: CATE_READ,
    request: {
        url: '/category/list', // 통신을 위한 추가적인 URL
        method: 'POST', // 통신 메소드 설정(서버 라우트에서 정한 방식으로 설정합니다.)
    },
});

위와 같이 먼저 constants를 import하고 "categoryRead"라는 action을 작성합니다.

1-3. reducers.js

다시 category라는 폴더에 reducers.js라는 파일은 생성합니다.

import {CATE_READ, CATE_INSERT, CATE_UPDATE, CATE_DELETE} from "./constants";
import {success, error} from "redux-saga-requests";

// 초기화
const initialState = {
    lists: [],
};

// API 통신으로 돌아온 데이터를 처리하는 부분
export default (state = initialState, action) => {
    switch (action.type) {
        case success(CATE_READ): {
            return {
                ...state,
                lists: action.data.categoryList, // 돌아온 데이터(categoryList)를 lists라는 초기값에 넣음.
            }
        }

        default: {
            return {
                ...state
            }
        }
    }
}

1-4. store.js에 categoryReducer를 추가

반복되는 코드는 작성하지 않도록 하겠습니다.

import categoryReducer from './category/reducers';

export default createStore(
    combineReducers({
        category: categoryReducer, // 기존 코드에서 변경된 부분
    }), composeWithDevTools(
        applyMiddleware(sagaMiddleware),
    ),
);

1-5. Category.js

src 폴더 밑으로 components 폴더 생성하고 ""Category.js"파일을 생성합니다.
그리고, 주석과 같이 읽으시면 되겠습니다.

import React, {Component} from 'react';
import {connect} from "react-redux";

// action은 항상 이렇게 import 해주어야함.
import {categoryRead} from "../store/category/actions";

class Category extends Component {
    // render()가 끝나고 실행되는 부분.
    componentDidMount() {
        this.props.categoryRead(); // 데이터를 불러오는 action(categoryRead)를 실행시킴.
    }

    render() {
        return (
            <div>
                <table>
                    <thead>
                    <tr>
                        <th>학년</th>
                        <th>학기</th>
                    </tr>
                    </thead>
                    <tbody>
                    {/* javascript의 프로토타입 map으로 반복문으로 생각하면 편함. */}
                    {this.props.lists.map(item => (
                        <tr key={item.id}>
                            <td>{item.year}</td>
                            <td>{item.semester}</td>
                        </tr>
                    ))}
                    </tbody>
                </table>
            </div>
        );
    }
}

// reducers.js에서 건너온 초기값 모음.
const mapStateToProps = state => ({
    lists: state.category.lists,
});

// actions.js에서 건너온 action들 모음.
const mapDispatchToProps = dispatch => ({
    categoryRead: () => dispatch(categoryRead()),
});

// 위의 mapStateToProps, mapDispatchToProps의 초기값 및 aciton 들을 class Category에 연결.
export default connect(mapStateToProps, mapDispatchToProps)(Category);

위와 같이 작성하였다면 아래와 같은 사진처럼 실행됩니다.

이상으로 READ를 마치겠습니다.

profile
다양하지만 공부할 것이 많은 개발자입니다.

0개의 댓글