[React] 10-2. Redux(로그아웃, 로그인 모달창, 로그인)

1. 로그아웃

① store.js

export let {프로필랜덤변경, 로그아웃} = user.actions;

 

 

② App.js

import {프로필랜덤변경, 로그아웃} from './store';

 

 

 

=> 로그아웃 클릭시 로그인 버튼만 보이도록 설정됨

 

 

 

2. 로그인 모달창

src 폴더아래에 components 폴더 아래 LoginModal.js 파일 생성

 

▶ LoginModal.js

export default function LoginModal({모달창닫기}){
    return (
        <div className="modal">
            <div className="modal-content">
                <span className="close" onClick={모달창닫기}>&times;</span>
                <div className="login-form">
                    <label>
                        이메일:
                        <input
                        type="text"
                        name="email"
                        />
                    </label>
                    <label>
                        닉네임:
                        <input
                        type="password"
                        name="nickname"
                        />
                    </label>
                    <button >로그인</button>
                </div>
            </div>
        </div>
    )
}

 

 

▶ App.js

import LoginModal from './components/LoginModal'; let [loginModal, setLoginModal] = useState(false);   function 모달창열기(){     setLoginModal(true);   }   function 모달창닫기(){     setLoginModal(false);   }

 

=> true가 될때는 modal창이 화면상에 보이도록, false일때는 modal창이 안보이도록 설정할 예정

 

=> loginModal 함수가 true라면 LoginModal이 실행되도록

 

▶ 결과

 

 

 

3. 로그인

▶ LoginModal.js

import { useDispatch } from "react-redux";
import {useState} from 'react';
import {로그인} from "../store";


export default function LoginModal({모달창닫기}){

    let [유저정보, 유저정보변경] = useState({
        email : '',
        nickname : '',
        profile : '/images/user3.jpg'
    });

    let 유저정보변경핸들러 = (e) => {  // 매개변수로 event 객체 넣어줌
        유저정보변경({...유저정보, [e.target.name] : e.target.value});
    }

    const 전송 = useDispatch();

    return (
        <div className="modal">
            <div className="modal-content">
                <span className="close" onClick={모달창닫기}>&times;</span>
                <div className="login-form">
                    <label>
                        이메일:
                        <input
                        type="text"
                        name="email"
                        onChange={유저정보변경핸들러}
                        value={유저정보.email}
                        />
                    </label>
                    <label>
                        닉네임:
                        <input
                        type="text"
                        name="nickname"
                        onChange={유저정보변경핸들러}
                        value={유저정보.nickname}
                        />
                    </label>
                    <button onClick={() => {
                        // 로그인정보 store에 전달
                        전송(로그인(유저정보))

                        // 전달완료 후 모달창 닫기
                        모달창닫기();
                    }}>로그인</button>
                </div>
            </div>
        </div>
    )
}

 

 

▶ store.js

 

 

▶ 결과