티포의개발일지

먼저 회원가입부터 구현하도록 하자.

먼저 user.interfaces.ts와 user 부분에 store의 state를 바꿔주는 부분을 추가하고 다음과같이 액션들의

interface부분을 바꿔준다.

userAct.interfaces.ts

export enum actionTypesUser {
    USER_INIT = "USER_INIT", // state 초기화
    USER_STATE = "USER_STATE", // userState 변경
    USER_INFO = "USER_INFO",  // userInfo 변경 
}

export type ActionsUser = UserInit | UserState | UserInfo 

export interface UserInit {
    type : actionTypesUser.USER_INIT;
    data : any;
}

export interface UserState {
    type : actionTypesUser.USER_STATE;
    data : any;
}

export interface UserInfo {
    type : actionTypesUser.USER_INFO;
    data : any;
}

user_reducer.ts

(...)
        case actionTypesUser.USER_STATE:
            return {
                ...state,
                [action.data[0]] : action.data[1]
            }
        case actionTypesUser.USER_INFO:
                return {
                    ...state,
                    userInfo : {
                        ...state.userInfo,
                        [action.data[0]] : action.data[1]
                    }
                }
(...)

State 안의 값이 변경될 경우와 userInfo 변경만 필요할 경우를 나눠서 선언해준다.

그다음 Input에서 쓰일 userChangeHandler를 선언해주고, SignupComponent에 userState와 함께 props를 전달한다.

[cate].tsx

import { GetServerSideProps, GetStaticPaths, GetStaticProps } from 'next'
import type { NextPage } from 'next'
//Redux
import { useDispatch, useSelector } from "react-redux";
import { RootStateInterface } from "../../store/interfaces/RootState";
import { UserState } from "../../store/interfaces/"
//React
import { useState } from 'react';
//Components
import LoginComponent from '../../src/components/LoginComponent'
import SignupComponent from '../../src/components/SignupComponent'

interface Props {
    CateData : string
}


const Auth:NextPage<Props> = ({CateData}) => {
    const dispatch = useDispatch();
    let userState = useSelector( // store에서 가져온 userState
        (state: RootStateInterface) : UserState => state.user
    )
    const userChangeHandler = (event : any):void => { // Input Handler
        dispatch({type : actionTypesUser.USER_INFO, data : [event.target.name,event.target.value]})
    }
    console.log(userState)

    return (

        <div className='auth'>
            {CateData} page
            {(CateData === 'login') ? <LoginComponent /> : ""}
            {(CateData === 'signup') ? 
            <SignupComponent
                userChangeHandler={userChangeHandler} // 회원가입에 props로 Handler함수를 보낸다.
            	userState={userState}
            /> : ""}
        </div>

        )
}


export default Auth;


export const getServerSideProps:GetServerSideProps = async (context) => { // SSR
    const CateData = context.query.cate;
    return {
        props: {
            CateData
        }
    }
    
}

컴포넌트에서 State가 잘 바뀌는지 확인하기위해 console.log를 추가하였다.

아직 SignupComponent에 Props type을 지정해주지 않았기 때문에 에러가 뜬다.

Props type을 설정해주고 log로 확인해보자.

SignupComponent.tsx

import type { NextPage } from 'next'
import { UserState } from "../../store/interfaces/"
import { useDispatch, useSelector } from "react-redux";
import { actionTypesUser } from "../../store/interfaces/user/userAct.interfaces"
import { RootStateInterface } from "../../store/interfaces/RootState";

interface Props {
    userChangeHandler : (event : any) => void;
    userState : UserState;
}

const Signup:NextPage<Props> = ({userChangeHandler,userState}) => {
    console.log(userChangeHandler)
    return (
        <div className='signup'>
        </div>
        )
}

export default Signup

정상적으로 떴으니 이제 form에 필요한 화면과 함수까지 구현해보자.

SignupComponent.tsx

import type { NextPage } from 'next'
import { UserState } from "../../store/interfaces/"
import { useDispatch, useSelector } from "react-redux";
import { actionTypesUser } from "../../store/interfaces/user/userAct.interfaces"
import { RootStateInterface } from "../../store/interfaces/RootState";

interface Props {
    userChangeHandler : (event : any) => void;
    userState : UserState;
}

const Signup:NextPage<Props> = ({userChangeHandler,userState}) => {
    const dispatch = useDispatch();
    const submitHandler = (event : any) => {
        event.preventDefault()
    }
    return (
        <div className='signup'>
            <form onSubmit={submitHandler}>
                <input 
                    name="id"
                    type="text"
                    placeholder="Enter ID"
                    onChange={userChangeHandler} />
                <button
                    type="submit">
                회원가입        
                </button>
            </form>
        </div>
        )
}

export default Signup

input onChange 부분에 props로 전달받았던 userChangeHandler를 주입했다.

아까 수정했던 [cate].tsx 파일에 작성했던 console.log로 확인해보자. userInfo가 정상적으로 바뀌는지 확인해보자.

SignupComponent에 userChangeHandler 함수가 잘 넘어갔고, [cate].tsx 파일에 선언했던 userState가 정상적으로 바뀌는것을 확인했다.