React.js를 사용한 웹 애플리케이션(SPA) 프론트앤드 만들기(5) - 리덕스 상태 관리, 상태에 따라 요소 나타내기

글 시작 전...

블로그의 글 종류를 보시면 알겠지만, 프론트엔드 쪽은 안 한지 오래고 대학원에서 인공지능을 연구하고 있습니다. 저는 제가 공부한 지식이 시간이 흘러 사라지는 것이 싫어 흔적으로 남기고자 시작하게 되었습니다. 그래서 제가 보통 시리즈 글을 쓰다가 마는 경향이 많은데 그 이유가 이 블로그의 방향은 제 공부 방향에 따라 바뀌기 때문입니다. 4편을 쓴지 꽤 되었는데 최근에 다음 편에 대한 문의가 계속되기도 하고 조회수가 지속적으로 있는 걸 보니 따라하시다가 다음 편이 없어서 허탈해하시는 분들도 계실 것 같습니다. 그래서 다시 공부해서 작성합니다만 기본 프로젝트이더라도 최신 경향과는 다소 차이가 있을 수 있음을 감안해주셨으면 합니다. 혹시 기다리셨던 분들께는 죄송하다는 말씀드립니다.

---

1편에서 마지막에 많은 폴더와 파일들을 생성했었습니다. 계속 components에 대한 작업을 해왔는데 이번에는 정의한 components를 가지고 containers에서 Redux store와 통신하여 여러 작업을 하게 됩니다.

​x
store
├── configure.js
├── index.js
└── modules
    ├── personalInputReducer.js
    ├── experienceInputReducer.js
    ├── developInputReducer.js
    └── index.js

위는 3편에서 생성했던 Redux 구조입니다. 회원가입 1번 페이지의 상태를 관리하는 Reducer 모듈을 personalInputReducer.js에 정의하겠습니다.

위 회원가입 페이지에서 상태 관리가 필요한 부분은 두 번째 부분입니다. 먼저 어떤 states가 필요한지를 살펴봐야 합니다. 일단 nickname, email, password, password check, email authentication이 필요해보입니다. 그리고 semantic-ui-css 내의 기능인 경고 문구를 띄우기 위해 각각에 대한 check 변수도 필요할 것입니다. 이메일 인증의 경우, 이메일을 보내기 전까지 입력 창과 확인 버튼을 비활성화 해놓을 예정이므로 1개가 더 필요합니다. 마지막으로, 경고 문구에 대한 상태들이 필요할 것입니다.

store/modules/personalInputReducer.js

xxxxxxxxxx
import { createAction, handleActions } from 'redux-actions';
​
// 액션 생성
...
​
const initialState = {
    email : '',
    password : '',
    pcheck : '',
    nickname: '',
    certification_number : '',
    sended : false,
    // 인증 확인 번호
    check_number : '1q2w3e',
    check : {
        email : false,
        password : false,
        pcheck : false,
        nickname: false,
        enable_next : false
    },
​
    loading: false,
    message: '',
    errMessage: ''
};
​
// 액션 정의
...

pcheck는 비밀번호 확인 입력 변수이고 check_number는 인증 확인 번호를 미리 넣어논 것입니다. 여기서는 실제로 메일 인증을 거치지 않고 기능만 구현합니다. 만약 실제로 간단히 구현한다면 인증 번호를 생성해서 메일로 보내고 사용자가 입력한 것과 확인하면 되기는 합니다. check state 안 enable_next 변수는 회원가입 다음 페이지로 넘어가는 버튼을 활성화하는 변수입니다.

위 그림은 대략적인 Redux 플로우입니다. Redux 상태 관리 구조는 제 기준으로는 매우 복잡하다고 생각됩니다. 하지만, 처음 구조를 설계해놓으면 상태나 액션을 추가하여 상태 관리하는 것은 매우 편리합니다. 그래서 처음 구조 설계를 위해 정규표현식으로 email의 양식이나 비밀번호 양식을 확인해서 알림을 띄워주는 것만 일단 구현해보겠습니다. send email, certificate는 다른 예시로 추가해놓았다는 것을 미리 알려드립니다. 더욱 자세히 알고 싶다 하시는 분들은 이 글을 참고해주시기 바랍니다.

store/modules/personalInputReducer.js

x
// 액션 생성
const CHANGE_VALUE = 'signup/CHANGE_VALUE';
const SEND_EMAIL = 'signup/SEND_EMAIL';
const CERTIFICATION = 'signup/CERTIFICATION';
​
export const change_value = createAction(CHANGE_VALUE, target => target);
export const send_email = createAction(SEND_EMAIL);
export const certification = createAction(CERTIFICATION);
​
// 액션 정의
export default handleActions ({
    [CHANGE_VALUE] : (state, action) => {
        const { name, value } = action.payload;
        const email_regex = /([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/;
        const password_regex = /^(?=.*\d)(?=.*[a-z])(?=.*[a-zA-Z]).{8,20}$/;
        const nickname_regex = /^[0-9a-zA-Z가-힝]*$/;
        let check = false;
​
        if(name === 'email') {
            check = (email_regex.exec(value) !== null);
        }
        else if(name === 'password') {
            check = (password_regex.exec(value) !== null);
        }
        else if(name === 'pcheck') {
            if(value === state.password) check = true;
        }
        else if(name === 'nickname') {
            if(value.length >= 2)
                check = (nickname_regex.exec(value) !== null);
        }
​
        return {
            ...state,
            [name] : value,
            check: {
                ...state.check,
                [name] : check
            }
        }
    },
    [SEND_EMAIL] : (state, action) => {
        console.log(state.email + '로 메일을 전송합니다');
        return {...state,
             sended : true,
             loading: true,
             message: '',
             errMessage: ''};
    },
    [CERTIFICATION] : (state, action) => {
        if(state.certification_number === state.check_number) {
            return {
                ...state,
                check : {
                    ...state.check,
                    enable_next : true
                }
            };
        }
        else {
            return {
                ...state,
                check : {
                    ...state.check,
                    enable_next : false
                }
            }
        }
    },
}, initialState);

일단 액션 생성에서 CHANGE_VALUE는 액션명을 정의해준 것입니다. 해당 액션명을 가지고 createAction 함수를 이용하여 액션을 생성해줍니다. 이때, 두 번째 인자는 payloaderCreator입니다. Action은 'type'과 'payload' 변수를 가지고 있는데 'payload'는 액션의 실행에 필요한 임의의 데이터입니다. Components를 정의할 때, 구성 요소마다 이름을 정의했었습니다. 이메일, 비밀번호 등 어느 것이 입력 중인지 (값이 변했는지)를 확인하기 위해 나중에 정의할 처리 함수에서 {이름, 값} 형태로 인수를 넘겨주는데 이 인수를 사용하기 위해 target=>target을 넣어준 것입니다. 이 부분이 잘 이해가 가지 않는다면 액션 함수를 사용할 때 인수를 받아 사용하려면 넣어주면 되는구나 라고 일단 생각하고 넘어가셔도 좋습니다.

액션 정의 부분을 보시면, handleActions 함수 인자 내 액션함수들이 정의되는 것을 알 수 있습니다. 액션 함수의 파라미터 중 state는 현재 이 reducer의 상태 변수들입니다. 그래서 현재 상태를 변경하고 싶다면 state를 통해 접근하면 됩니다. 그리고 action은 위에 설명한대로 임의의 데이터입니다. 이를 통해 컨테이너로부터 인수를 넘겨받을 수 있습니다. 그래서 action.payload로부터 name, value를 넘겨받아 정규표현식을 처리한 뒤 상태를 반환하면 됩니다. 여기서 return [state]으로 반환된 [state]는 initialState가 되어 상태가 변경됩니다.

이제 export를 위해 다음 파일들을 생성해줍니다.

store/modules/index.js

import { combineReducers } from 'redux';
import personalInputReducer from './personalInputReducer';
​
export default combineReducers({
    personalInputReducer
});

store/configure.js

xxxxxxxxxx
import { createStore, applyMiddleware } from 'redux';
import modules from './modules';
import thunk from 'redux-thunk';
​
const configure = () => {
    const store = createStore(modules, applyMiddleware(thunk));
    return store;
};
​
export default configure;

위에 redux-thunk는 리덕스 비동기 작업을 위한 미들웨어입니다. 자세한 내용은 이 글을 참고해주세요. 이를 사용하기 위해서 다음과 같이 설치해주겠습니다.

xxxxxxxxxx
yarn add redux-thunk

store/index.js

xxxxxxxxxx
import configure from './configure';
export default configure();

Root.js

...
import { Provider } from 'react-redux';
import store from 'store';
​
const Root = () => (
    <BrowserRouter>
        <Provider store={store}><App/></Provider>
    </BrowserRouter>
)
​
export default Root;

이제 Store를 Provider를 통해 App에 연결해주면 상태 관리를 위한 준비는 어느 정도 완료되었습니다.

이제 Container를 생성해주도록 하겠습니다. 그 전에 state와 props의 기본 개념을 충분히 알아야 하므로 모르신다면 이 글을 읽는 것을 추천드립니다.

containers/Register/PersonalInputContainer.js

x
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { PersonalInput } from 'components/Register';
import * as inputActions from 'store/modules/personalInputReducer';
​
class PersonalInputContainer extends Component {
    // 처리 함수 정의
    handleChange = (e) => {
        const {InputActions} = this.props;
        const {name, value} = e.target;
        InputActions.change_value({name: name, value: value})
    }
    
    handleSendMail = (e) => {
        const { InputActions } = this.props;
        InputActions.send_email();
    }
​
    handleCertificate = (e) => {
        const { InputActions } = this.props;
        InputActions.certification();
    }
    
    render() {
        const {check} = this.props;
​
        return <PersonalInput
            onChange={this.handleChange}
            onClickSendMail={this.handleSendMail}
            onCertificate={this.handleCertificate}
            check={check} />;
    }
}
​
// props로 넣어줄 스토어 상태 값
const mapStateToProps = state => ({
    ...state.personalInputReducer
});
​
// props로 넣어줄 액션 생성 함수
const mapDispatchToProps = dispatch => ({
    InputActions: bindActionCreators(inputActions, dispatch)
})
​
export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(PersonalInputContainer);

Container도 역시 컴포넌트지만 편리한 상태 관리를 위해 한 번 더 감싸준 것이라 생각하면 편리합니다. Container에 입력 컴포넌트에 값이 변경되면 이를 알려주는 처리 함수를 정의했습니다. Reducer를 inputActions로써 불러오고 내부에 정의된 change_value 함수를 호출하게 됩니다. 이 때, 값이 변경되어 이 처리 함수를 호출한 객체가 있을 것입니다. 이 객체에 대한 정보를 e가 담고 있습니다. 그래서 e.target으로부터 해당 객체의 이름과 값을 가져와 액션 함수의 인수로 넣어줍니다. 위에서 action.payload 했던 것이 이해가 되실 겁니다.

containers/Register/index.js

export { default as PersonalInputContainer } from './PersonalInputContainer';

containers/index.js

x
export { default as Register } from './Register';

이제 components와 이를 연결해주겠습니다.

components/Register/PersonalInput.js

xxxxxxxxxx
...
class PersonInput extends Component {
    render() {
        const { check, onChange } = this.props
        return (
            <div>
                <Form>
                    <Segment piled style={style.paddinglr}>
                        <Label style={style.base}> Nickname </Label>
                        { !check.nickname && <Label pointing='below' color='red' basic> Nicknames can not contain special characters </Label>}
                        <Form.Input onChange={onChange} name='nickname' placeholder='Nickname'/>
                        ...
                    </Segment>
                </Form>
            </div>
        )
    }
}

경고 메시지가 Label 오른쪽에 나타나게 할 것이므로 <Label>밑에 써주는데 대신 check가 true일 때는 나타나지 않게 합니다. 그 다음 Input 요소의 onChange 함수에 정의한 onChange 함수를 넣어 값이 변경될 때마다 정의된 onChange 함수가 호출되도록 합니다. 다른 요소들도 마찬가지로 처리해주도록 합니다.

pages/Signup.js

xxxxxxxxxx
...
//import {PersonalInput} from 'components/Register';
import {PersonalInputContainer} from 'containers/Register';
...
​
class Signup extends Component {
    render() {
        ...
        // <PersonalInput/>을 <PersonalInputContainer/>로 변경
    }
}

이제 yarn start를 통해 서버를 실행시켜 회원가입 페이지로 들어가면 값을 변경함에 따라 경고 알림이 사라질 것입니다. 이제 기본적인 리덕스 상태 관리 구조가 완성되었습니다.

이제 다른 기능들도 직접 완성시켜보세요. 일부러 이메일 보내는 것과 인증 부분의 액션 함수를 예시로 정의해놓았습니다. 이 기능들은 component와 연결만 하면 될 것이고 다른 부분들은 액션 함수부터 정의해보시길 바랍니다 ㅎㅎ

참고로 다음은 제가 정의했던 Action 함수 목록입니다.

xxxxxxxxxx
const CHANGE_VALUE = 'signup/CHANGE_VALUE';
const SUBMIT_FIRST = 'signup/SUBMIT_FIRST';
const SEND_EMAIL = 'signup/SEND_EMAIL';
const CERTIFICATION = 'signup/CERTIFICATION';
const TO_HOME = 'signup/TO_HOME';
​
const SEND_MAIL_SUCCESS = 'contact/SEND_MAIL_SUCCESS';
const SEND_MAIL_FAILED = 'contact/SEND_MAIL_FAILED';
​
export const change_value = createAction(CHANGE_VALUE, target => target);
export const submit_first = createAction(SUBMIT_FIRST);
export const send_email = createAction(SEND_EMAIL);
export const certification = createAction(CERTIFICATION);
export const to_home = createAction(TO_HOME);
​
export const send_mail_success = createAction(SEND_MAIL_SUCCESS);
export const send_mail_failed = createAction(SEND_MAIL_FAILED);

 

다음 편은 아래 이미지의 두 번째 페이지를 구현하는 것입니다. 하지만 이는 여태껏 배웠던 것의 심화 응용 버전일 뿐 여기까지 따라오셨다면 뒤는 본인이 원하는대로 직접 구현해보는 것이 가능합니다. (일단 제가 다음 편을 언제 올릴지를 모르겠습니다...)

위의 컴포넌트들은 semantic-ui의 컴포넌트를 이용해서 구현하였습니다.