React.js를 사용한 웹 애플리케이션(SPA) 프론트앤드 만들기(3) - Redux 구조, 페이지 내 컴포넌트 변경

2편 : https://wdprogrammer.tistory.com/18

2편에서 semantic-ui를 통해 간단히 로그인 화면을 구성하고 회원가입 버튼을 누르면 회원가입 페이지로 이동하는 라우팅까지 구현하였습니다. 이제 반응형 회원가입 페이지를 만들기 위해 페이지 내 컴포넌트 변경을 구현하고 Redux 구조를 설정하도록 하겠습니다!

 

5. 회원가입 페이지 이동 구현

회원가입 페이지를 구현할 때 사용될 component들을 먼저 생성해주겠습니다.

xxxxxxxxxx
src/components/Register
├── PersonalInput
│   ├── PersonalInput.js
│   ├── PersonalInput.css
│   └── index.js
├── DevelopInput
│   ├── DevelopInput.js
│   ├── DevelopInput.css
│   └── index.js
├── ExperienceInput
│   ├── ExperienceInput.js
│   ├── ExperienceInput.scss
│   └── index.js
└── CompleteRegister
    ├── CompleteRegister.js
    ├── CompleteRegister.css
    └── index.js

PersonalInput : 개인정보 입력 양식

DevelopInput : 개발자 정보 입력 양식

ExperienceInput : 프로젝트 경험 양식

CompleteRegister : 회원가입 완료 화면

 

src/components 경로는 생략하고 작성하겠습니다.

Register/PersonalInput/PersonalInput.js

xxxxxxxxxx
import React, { Component } from 'react';
​
class PersonalInput extends Component {
    render() {
        return (
            <div> 개인정보 입력 양식 </div>
        );
    };
};
​
export default PersonalInput;

 

Register/PersonalInput/index.js

xxxxxxxxxx
export { default } from './PersonalInput';

 

Register/DevelopInput/DevelopInput.js

xxxxxxxxxx
import React, { Component } from 'react';
​
class DevelopInput extends Component {
    render() {
        return (
            <div> 개발자 정보 입력 양식 </div>
        );
    };
};
​
export default DevelopInput;

 

Register/DevelopInput/index.js

xxxxxxxxxx
export { default } from './DevelopInput';

 

Register/ExperienceInput/ExperienceInput.js

xxxxxxxxxx
import React, { Component } from 'react';
​
class ExperienceInput extends Component {
    render() {
        return (
            <div> 프로젝트 경험 입력 양식 </div>
        );
    };
};
​
export default ExperienceInput;

 

Register/ExperienceInput/index.js

xxxxxxxxxx
export {default} from './ExperienceInput';

 

Register/CompleteRegister/CompleteRegister.js

xxxxxxxxxx
import React, { Component } from 'react';
​
class CompleteRegister extends Component {
    render () {
        return (
            <div> 회원가입 완료 </div>
        );
    };
}
​
export default CompleteRegister;

 

Register/CompleteRegister/index.js

xxxxxxxxxx
export { default } from './CompleteRegister';

 

Register/index.js

xxxxxxxxxx
export {default as PersonalInput} from './PersonalInput';
export {default as DevelopInput} from './DevelopInput';
export {default as ExperienceInput} from './ExperienceInput';
export {default as CompleteRegister} from './CompleteRegister';

 

회원가입을 구성할 컴포넌트를 구현했으니 이제 회원가입 화면에 출력하겠습니다.

하나의 페이지에서 여러 컴포넌트를 바꿔가면서 보여주기 위해 URL을 이용하겠습니다.

src/App.js

xxxxxxxxxx
// ...
    <div>
        <Route exact path="/" component={Home} />
        <Switch>
            <Route path="/signup/:number" component={Signup} />
            <Route path="/signup" component={Signup} />
        </Switch>
    </div>
// ...

exact 대신 Switch를 통해 정확히 일치하는 것 하나만 Route를 하게 합니다. 루트 링크가 같다면 먼저 작성된 Route에 걸리게 됩니다.

URL 뒤에 number 변수 전달해서 페이지 이동을 하겠습니다.

src/pages/Signup.js

xxxxxxxxxx
import React, {Component} from 'react';
import {PersonalInput} from 'components/Register';
import {DevelopInput} from 'components/Register';
import {ExperienceInput} from 'components/Register';
import {CompleteRegister} from 'components/Register';
​
class Signup extends Component {
    render() {
        const { match } = this.props;
        const number = match.params.number;
        return (
            <div>
                { (number === '1' || number === undefined) && <PersonalInput />}
                { (number === '2') && <DevelopInput />}
                { (number === '3') && <ExperienceInput/>}
                { (number === '4') && <CompleteRegister/>}
            </div>
        )
    }
};
​
export default Signup;

Route로부터 전달받은 number 매개변수를 통해 페이지를 보여주게 됩니다.

number가 1이거나 전달되지 않은 경우도 맨 첫 페이지인 PersonalInput을 보여주게 됩니다.

이제 실행을 하고 회원가입 페이지로 들어가면 URL은 http://localhost:3000/signup 이고 "개인정보 입력 양식" 이라는 문장이 나타납니다.

그리고나서, URL을 http://localhost:3000/signup/[숫자]로 변경해보세요. 그러면 1~4까지 입력에 따라 페이지가 변경되는 것을 확인할 수 있습니다.

 

6. Redux 구조 생성

먼저, src 폴더 밑에 store 폴더를 생성해주고 다음과 같이 폴더 및 파일을 생성하여 구조를 만들어줍니다.

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

꼭 위에처럼 하지 않아도 됩니다. action을 패키지로 따로 빼는 형태도 있습니다만, 큰 프로젝트가 아니므로 따로 나누지 않겠습니다.

configure.js : Redux store를 생성하는 함수를 모듈화하여 내보냅니다. 원래 하나의 앱에는 하나의 store만 존재하지만, 예외적으로 서버 쪽을 구현할 때 각 요청이 처리될 때마다 생성해주어야 하는 경우가 발생합니다. 그런 경우를 위해 보통 모듈화를 합니다.

store/index.js : store를 생성한 뒤 내보냅니다. 여기서 생성된 store는 브라우저 쪽에서만 사용합니다. (서버사이드 렌더링에서는 configure.js를 통해 새로 생성)

modules : Reducer 모듈을 담고 있는 패키지입니다. modules 내 reducer는 구현될 각 페이지의 상태를 관리합니다.

 

다음에는 앞서 설정한 Redux 구조를 바탕으로 PersonalInput 컴포넌트를 구현해보겠습니다.