boilerplate(client) - 로그인 기능 만들기(1)

 

따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다.

 

 

 

 

로그인 기능을 위한 Redux 설정하기

1. type 관리를 위한 type.js 생성

src > action 폴더에 type 관리를 위한 type.js를 생성한다.

이 type들은 같은 action 폴더에 있는 user_action.js와 reducer 폴더의 user_reducer.js 등에서 쓰이는데 이를 쉽게 관리하기 위함이다.

 

export const LOGIN_USER = "login_user"; 

 

위 코드와 같이 type으로 지정할 내용을 적어주면 된다.

 

 

2. login action 구현

src > action 폴더에 user와 관련된 action을 구현하기 위한 user_action.js를 생성한다.

 

import axios from 'axios';
import {
    LOGIN_USER
} from './types';

export function loginUser(dataTosubmit) {

    const request = axios.post('/api/users/login', dataTosubmit)
    .then(response => response.data)

    return {
        type: LOGIN_USER,
        payload: request
    }
} 

 

login을 위한 요청을 서버에 보내는 작업을 이곳에서 해주면 된다.

 

axios.post()를 이용하여 사용자로부터 입력받은 내용을 서버에 보내고 서버에서 받은 data를 request에 저장한다.

이후 action의 타입과 서버로부터 받은 내용을 저장한 request를 return시켜준다.

 

 

3. login reducer 구현

src > reducer 폴더 내에 user_reducer.js를 생성한다.

 

import {
    LOGIN_USER
} from '../_actions/types';

export default function(state={}, action) {
    switch (action.type) {
        case LOGIN_USER:
            return {...state, loginSuccess: action.payload}
            break;

        default:
            return state
            break;
    }
} 

 

각 action의 타입에 따라 서버로부터 받은 내용을 loginSuccess에 저장 후 state와 함께 return한다.

 

 

4. rootReducer에 user_reducer 추가

src > reducer 폴더 내의 index.js에 user_reducer.js를 import하고 combineReducers()에 추가한다.

이 과정을 거침으로써 reducer를 사용할 수 있다.