패스트캠퍼스 챌린지 30 일차 - 리액트로 만드는 퀴즈 사이트04

0. 공부 인증 

공부 시작 19 : 12

공부 종료  20 : 28

드디어 마지막 날이다~~!!!

마지막 강의인 만큼, 그래도 시작한 프로젝트는 끝내야할 것 같아서, 학교 과제보다 먼저 시작했다....

 

여튼 패캠챌린지 기간에 작은 리액트 플젝까지 끝낼 수 있어서 기쁘다.

제발 30일의 노력이 문제없이 통과되어 환불까지 이어졌으면 좋겠다.

 

 

1. 퀴즈 컴포넌트 만들기

리액트 라우터의 기능을 사용하지 않고, 단순히 리덕스의 값을 불러와서 분기 처리를 해주는 것임.

그래서 조건부 렌더링을 해주어야 함.

{page === 0 && ~~ }

{page > 0 && ~~ }

components/Quiz.js

import React from "react"
import { useSelecter, useDispatch } from 'react-redux'
import {BlueButton} from "~~"

export defalut function Quiz(){
	const dispatch = useDispatch()
    const quiz = useSelector(state => state.score.quizs)
    const page = useSelector(state => state.score.page)
    
    return (
    	<>
        	{quiz[page - 0]번째 퀴즈}
        </>
    )
}

 

배열에서 값을 뽑아와서 컴포넌트를 렌더링 하고 싶은 경우에,

arr.map(item => {return (<>item.data</>)})

라는 식으로 해주면 됨.

 

2. 프로그래스 바 만들기 -> 컴포넌트 생성하기

components/Progress.js

import React from "react"

export function Progress({}){
	return (
    	<>
        	<div className="progress>
            	<div className="gauge"></div>
            </div>
        </>
    
    )

}

위의 코드에서 클래스의 백그라운드를 조절해가면서 게이지를 채워 나갈 수 있음.

 

해당 스타일 컴포넌트 참고.

import React from "react";
import "./Progress.css";

export function Progress({ page, maxPage }) {
  return (
    <div className="progress">
      <div className="page">
        {page}/{maxPage}
      </div>
      <div className="gauge">
        <span
          className="fill"
          style={{ width: `${((page - 1) / maxPage) * 100}%` }}
        ></span>
      </div>
    </div>
  );
}

또한 해당 컴포넌트를 하나로 합치는 작업을 App.js 에서 진행함. -> 마찬가지로 라우터를 사용하지 않기 때문에, 분기처리를 해줌

완성된 App.js

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { PinkButton } from "./components/PinkButton";
import { Quiz } from "./components/Quiz";
import { next, reset } from "./store/modules/score";
import styled from "styled-components";

const Main = styled.main`
  width: 100%;
  max-width: 360px;
  padding: 30px 0;
  margin: auto;
  text-align: center;
`;

const MainImg = styled.img`
  width: inherit;
`;

const Header = styled.h1`
  margin: 30px 0;
`;

const SubHeader = styled.h2`
  font-size: 1.1em;
  color: #8a8e90;
  font-weight: 400;
  margin-bottom: 30px;
`;

const Score = styled.div`
  font-size: 4em;
  color: #f92b46;
`;

function App() {
  const score = useSelector((state) => state.score.score);
  const page = useSelector((state) => state.score.page);
  const quizs = useSelector((state) => state.score.quizs);
  const dispatch = useDispatch();

  return (
    <>
      {page === 0 && (
        <Main>
          <MainImg src="/city/main.jpg" alt="뉴욕 풍경" />
          <Header>나라별 수도 퀴즈</Header>
          <SubHeader>진정한 수도 고인물도 100점을 맞기 어렵습니다!</SubHeader>
          <PinkButton
            text="테스트 시작!"
            clickEvent={() => {
              dispatch(next());
            }}
          />
        </Main>
      )}
      {page > 0 && page <= quizs.length && (
        <Main>
          <Quiz />
        </Main>
      )}

    </>
  );
}

export default App;

여기서 체크해야할 것

-> 리덕스를 사용하기 위해서,

import { useSelector, useDispatch } from "react-redux"; 

를 사용했다는 점.

 

-> 또한 이들의 사용법으로

const score = useSelector((state) => state.score.score);

로 활용이 가능하다는 점.

 

-> 프로그래스 바 형태를 라이브러리를 사용하지 않고, 스타일 태그로 구현할 수 있다는 점.

 

 

완성된 컴포넌트 및 페이지.

 

3. 해당 컴포넌트를 완료한 이후, 결과 페이지 제작.

 

해당 페이지도 라우터를 사용하지 않기 때문에 조건문으로 분기처리만 진행

{page > quizs.length && (
        <Main>
          <Header>당신의 수도 퀴즈 점수는?</Header>
          <Score>{score}점</Score>
          <SubHeader></SubHeader>
          <PinkButton
            text="다시 테스트하기!"
            clickEvent={() => {
              dispatch(reset());
            }}
          />
        </Main>
)}

리덕스를 사용하기 때문에, 퀴즈 컴포넌트에서 데이터를 업데이트하고

결과 페이지에서는 값을 그냥 출력만 해주면 됨.

 

완성된 결과 점수 페이지

끝이다!~~!!~~!

 

 

환급 챌린지 (30/30)

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지