[React][side project] mbti궁합 테스트(2)

🎈이전글과 이어지는 글입니다.

 

5. MeinputPage & YouinputPage - 2,3번째 화면  & 모달

 

🥚 MeinputPage - 나의 정보 입력 플랫폼    

 

  <기능 구현>

- 입력한 정보 ⏩ 리덕스 스토어에 저장

- 성별 Click ⏩ 둘 중 한개만 클릭 가능

- 인풋창 공백 ⏩ 다음페이지로 넘어갈 수 없음

- 혈액형 & MBTI Click ⏩ 모달창에서 선택한 값으로 입력(직접입력 불가)

- 다음으로  Click ⏩ 다음페이지 이동 (정보 모두 입력시)

 

🥚 MeinputPage에 입력값 들어갈 state 만들기 

//MeinputPage.jsx
import React, { useState } from "react";

const MeinputPage = () => {
    const [name, setName] = useState("");
    const [gender, setGender] = useState("");
    const [born, setBorn] = useState("");
    const [blood, setBlood] = useState("");
    const [mbti, setMbti] = useState("");

const handleSubmit = (e) => {
        e.preventDefault();
    };
    
    return(
    <>
   <form onSubmit={handleSubmit}>
             <div>
                <label htmlFor="내이름">내 이름</label>
                   <input type="text"
                          placeholder="이름을 입력해주세요"
                          onChange={(e) => {
                          setName(e.target.value);
                          }}
                    />
              </div>
              <div className="line" />

              <div className="genderType">
                 <label htmlFor="성별" className="genderTitle">성별 </label>
                    <input type="radio" className="radioInput" value="male" name="gener" onChange={(e) => setGender(e.target.value)} />
                      <label htmlFor="남" className="labelGender">
                           <span>남</span>
                       </label>
                      <input type="radio" className="radioInput" value="female" name="gener" onChange={(e) => setGender(e.target.value)} />
                         <label htmlFor="여" className="labelGender">
                              <span>여</span>
                         </label>
               </div>
               <div className="line" />
                       
                <div>
                   <label htmlFor="생년월일">생년월일</label>
                      <input type="text" placeholder="8자리를 입력해주세요" value={born} maxLength="8" onChange={(e) => setBorn(e.target.value)} />
                 </div>
                 <div className="line" />
                       
                 <div>
                    <label htmlFor="혈액형">혈액형</label>
                        <input type="text"
                                placeholder="혈액형을 입력해주세요"
                                value={blood}
                                onChange={(e) => setBlood(e.target.value)}
                                onClick={() => {
                                    setBloodModal(!bloodModal);
                                }}
                                readOnly
                            />
                 </div>
                 <div className="line" />
                        
                  <div>
                     <label htmlFor="mbti">MBTI</label>
                        <input  type="text"
                                placeholder="MBTI를 입력해주세요"
                                value={mbti}
                                onChange={(e) => setMbti(e.target.value)}
                                onClick={() => {
                                    setMbtiModal(!mbtiModal);
                                }}
                                readOnly
                            />
                        </div>
                        <div className="line" />
   </form>
   </>
   )}

- onChange함수를 통해 인풋창에 입력되는 값으로 각 state를 변경할 수 있게 해줬음.

- form에 hadleSubmit함수를 적용시켜서 자동으로 제출되는 것을 방지시켜줬음.

 

 

🔷 입력한 정보 ⏩ 리덕스 스토어에 저장

$ npm install react-redux

1) src 폴더에 redux 폴더를 만들고 아래와 같이 파일을 생성해 준다. 

2) reducer.js

//reducer.js
const initialState = {
    meData: [],
    youData: [],
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case "ADD_ME_DATA":
            return {
                ...state,
                meData: [...state.meData, action.payload],
            };
        case "ADD_YOU_DATA":
            return {
                ...state,
                youData: [...state.youData, action.payload],
            };
        default:
            return state;
    }
};

export default reducer;

 - meData, youData의 초기값을 빈배열로 생성해 준다. 

 - 액션 타입이 ADD_ME_DATA일 때는 meData에 값을 저장해주고 ADD_YOU_DATA일 때는 youData에 값을 저장해주는     리듀서를 작성해 준다.

 

3) index.js

//index.js
import { combineReducers } from "redux";
import reducer from "./reducer";

const reducers = combineReducers({
    data: reducer,
});

export default reducers;

 

4) store.js

//store.js
import { createStore } from "redux";
import reducers from "./index";
import { composeWithDevTools } from "redux-devtools-extension";

export const store = createStore(reducers, composeWithDevTools());

 스토어를 생성해주고 리듀서 값을 넣어준다. composeWithDevTools()는 redux dev tool을 사용해주려면 써줘야한다.

 

5) src index.js

// src index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

import App from "./components/App";
import reportWebVitals from "./reportWebVitals";

import { Provider } from "react-redux";
import { store } from "../src/redux/store";

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />{" "}
        </BrowserRouter>
    </Provider>,
    document.getElementById("root")
);


reportWebVitals();

<Provider>를 최상위에 감싸주고 store를 넣어주면 이제 store에 담긴 값들을 전역에서 사용할 수 있게 된다.

사용 전에 데이터를 보내주는 컴포넌트 안에서 dispatch를 해줘야한다.

//MeinputPage.jsx
import { useDispatch } from "react-redux";
import React, { useState } from "react";

const MeinputPage = () => {
    const dispatch = useDispatch();
 
    const [name, setName] = useState("");
    const [gender, setGender] = useState("");
    const [born, setBorn] = useState("");
    const [blood, setBlood] = useState("");
    const [mbti, setMbti] = useState("");
//사용자가 입력한 데이터를 가지고 있을 state들

    const onClick = () => {
        if (name.length !== 0 && gender.length !== 0 && born.length !== 0 && blood.length !== 0 && mbti.length !== 0) {
            dispatch({
                type: "ADD_ME_DATA",
                payload: {
                    name,
                    gender,
                    born,
                    blood,
                    mbti,
                },
            });}
 //사용자가 값을 입력하지 않았을 때는 데이터가 dispatch되지 않게 조건문을 걸어줌 
 
 return ( 
 		<button type="submit" className="blackBtn" onClick={onClick}> 다음으로
         </button>
     };

다음으로 버튼을 클릭할 때 ADD_ME_DATA action이 발생하고 데이터를 싣는 동작이 일어나게 했다. 이렇게 해주고 빈칸에 데이터를 입력하고 redux devTool을 확인해보면,  데이터가 잘 저장되어 있는 것을 확인할 수 있다.

 

🔷성별 Click ⏩ 둘 중 한개만 클릭 가능

  매우 간단하게 할 수 있다. 일단, input radio를 통해 선택버튼을 생성해 준다. name값에 "gener" 라고 써주면 둘 중 한게만 선택 될 수 있게 구현 할 수 있다. 

<label htmlFor="성별" className="genderTitle"> 성별 </label>
     <input type="radio" className="radioInput" value="male" name="gener" onChange={(e) => setGender(e.target.value)} />
     <label htmlFor="남" className="labelGender">
        <span>남</span>
     </label>
     
     <input type="radio" className="radioInput" value="female" name="gener" onChange={(e) => setGender(e.target.value)} />
     <label htmlFor="여" className="labelGender">
          <span>여</span>
     </label>

 

🔷 인풋창 공백 ⏩ 다음페이지로 넘어갈 수 없음 / 🔷 다음으로Click ⏩ 다음페이지 이동(정보입력시)

 위에 썻던 onClick 이벤트 함수에 글자수가 0일때 alert창이 뜰 수 있게 조건문을 추가해줬다. 그리고 버튼 클릭시 자동으로 페이지가 넘어가면 안되니까 useNavigate함수를 조건문 안에서 사용해줬다.

import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";

const MeinputPage = () => {
let navigate = useNavigate();
    const dispatch = useDispatch();

const onClick = () => {

  if (name.length === 0) {
            alert("이름을 입력해주세요");
        }
        if (gender.length === 0) {
            alert("성별을 선택해주세요");
        }
        if (born.length === 0) {
            alert("생년월일 8자리를 입력해주세요");
        }
        if (blood.length === 0) {
            alert("혈액형을 선택해주세요");
        }
        if (mbti.length === 0) {
            alert("mbti를 선택해주세요");
        }
        
        if (name.length !== 0 && gender.length !== 0 && born.length !== 0 && blood.length !== 0 && mbti.length !== 0) {
            navigate("/youpage");
            dispatch({
                type: "ADD_ME_DATA",
                payload: {
                    name,
                    gender,
                    born,
                    blood,
                    mbti,
                },
            });}

 

 

🔷 혈액형 & MBTI Click ⏩ 모달창에서 선택한 값으로 입력(직접입력 불가)

  모달 창에서 선택된 값을 받아오려면 setState를 props로 넘겨줘야한다. BloodModal, MbtiModal창을 별도의 컴포넌트에 따로 제작한 다음 MeinputPage에 삼항연산자를 사용해서 true일때 모달이 보이고 false일 때는 보이지 않게 해준다음, props로  BloodModal, MbtiModal에 해당 값을 받아올 state, setState를 props해줘야 한다. 

그럼 각 모달창에서는 클릭시 setState를 통해 state를 변경할 수 있게 이벤트를 만들어 주면 된다. 

 

//MeinputPage.jsx

//모달 기본값 false로 설정
const [bloodModal, setBloodModal] = useState(false);
const [mbtiModal, setMbtiModal] = useState(false);
    
//1. 삼항연산자 사용해서 모달 true/ false 일 때 조건 만들어주기 & props해주기 
{bloodModal === true ? <BloodModal setBloodModal={setBloodModal} setBlood={setBlood} /> : null}
{mbtiModal === true ? <MbtiModal setMbtiModal={setMbtiModal} setMbti={setMbti} /> : null}

//2. input창 클릭시 모달이 나오도록 설정 & 
     읽기만 가능하게 readOnly를 써줌(이래야 모달값을 직접입력할 수 없고 클릭값만 들어가게 할 수 있음)
 <input
     type="text"
     placeholder="혈액형을 입력해주세요"
     value={blood}
     onChange={(e) => setBlood(e.target.value)}
     onClick={() => {setBloodModal(!bloodModal);}} readOnly />

  
  <label htmlFor="mbti">MBTI</label>
       <input
          type="text"
          placeholder="MBTI를 입력해주세요"
          value={mbti}
          onChange={(e) => setMbti(e.target.value)}
          onClick={() => {setMbtiModal(!mbtiModal);}} readOnly/>

 

해당 혈액형을 클릭하면 props로 받아온 state를 변경하고, 자동으로 창이 종료된 뒤 그 값이 인풋창에 입력됨.

//BloodModal.jsx

import React from "react";
import styled from "styled-components";
import { ModalBack } from "./IconModal";

let BloodModal = (props) => {
    const onClick = () => {
        props.setBloodModal(false);
    };
    return (
        <ModalStyle>
            <ModalBack>
                <div className="BloodModal">
                    <div className="bloodTitle">혈액형</div>
                    <div
                        className="bloodType"
                        id="A"
                        onClick={() => {
                            props.setBlood("A");
                            props.setBloodModal(false);
                        }}
                    >
                        A형
                    </div>
                    <div
                        className="bloodType"
                        id="B"
                        onClick={() => {
                            props.setBlood("B");
                            props.setBloodModal(false);
                        }}
                    >
                        B형
                    </div>
                    <div
                        className="bloodType"
                        id="O"
                        onClick={() => {
                            props.setBlood("O");
                            props.setBloodModal(false);
                        }}
                    >
                        O형
                    </div>
                    <div
                        className="bloodType"
                        id="AB"
                        onClick={() => {
                            props.setBlood("AB");
                            props.setBloodModal(false);
                        }}
                    >
                        AB형
                    </div>
                </div>
                <div className="modalBack" onClick={onClick}></div>
            </ModalBack>
        </ModalStyle>
    );
};

🥚 [나의 정보, 상대 정보] ,  [혈액형 모달, MBTI 모달]  는 각각 하나씩만 정리해두려고 한다.(작동 방식이 유사함)

 

6. ResultPage (마지막 페이지)

 

 <기능 구현>

- 입력한 정보 조합한 점수 띄우기 

- 입력한 정보 조합한 결과 띄우기 

- 다시하기Click ⏩ 앞서 정리했던 useNavigete함수 동일하게 사용

- 결과링크 공유 Click  ⏩ mbti(1)포스팅에 정리해둠(CopyToClipboard)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

🔷 점수 & 결과 띄우기

 

Axios post를 해서 받아온 결과값을 원하는 위치에 뿌려주면 되는데

 

1) redux store에 저장했던 값을 useSelector를 통해 가져오기

//ResultPage.jsx

import axios from "axios";

const ResultPage = () => {
    const state = useSelector((state) => state);
}

해당값 콘솔창을 띄워보면, 데이터를 잘 가지고 온 것을 확인할 수 있다. 이 값을 API가 요구하는 형식에 맞춰서 post해주면 된다. 

 

useEffect에 빈배열을 넣어줘서 무한렌더링이 발생하는 것을 막아주고, 그안에 axios 요청을 한다. 

받아온 데이터를 만들어둔 state에 저장해준다. 이 방식으로 하면 어쩔 수 없이 가장 처음에 undefined가 찍히게 되는데, 그러면 undefined일 때는 화면에 출력할 값이 없기 때문에 오류가 발생한다. 화면에 출력할 때 조건문을 하나 작성해서 undefined이 아닐 때만 동작이 일어나게 해줘야한다. 

const [result, setResult] = useState();
   
useEffect(() => {
        axios
            .post("https:// api주소링크", {
                me: state.data.meData[0],
                you: state.data.youData[0],
            })
            .then((res) => {
                setResult(res.data.result);
            })
            .catch((err) => {
                console.log(err);
            }, []);

        return <></>;
    }, []);

 

콘솔창에 해당 res 값을 띄워보면, post를 성공한 것을 확인 할 수 있다. 이제 이 데이터들을 원하는 자리에 배치해주면 된다.

조건문 만족시에만 내부 내용을 출력하는 조건문 작성 

const resultContentsBox = () => {
        if (result !== undefined) {
        
        return(
        //출력할 내용들 작성)
        }

이렇게 해주고 ResultPage return 값에 함수를 실행해주면 된다.

return (
        <>
            <ResultStyle>{resultContentsBox()}</ResultStyle>
        </>
    );

 

🚩 스타일 컴포넌트까지 작성한 최종코드 🔽

https://github.com/codnjs779/chemistry-test.git

GitHub - codnjs779/chemistry-test