점수 화면, 랭킹 화면을 그리고 링크 연결하기(리액트 기초 3주차 숙제)

1. Message, Ranking 페이지 만들기

 

2. 각 화면 라우팅, 데이터는 리덕스에 넣기

-라우팅 만들어주기

-리덕스 모듈, 스토어 만들어주기

 

3. 스토어 연결해주기

-index.js 가서 Provider사용

-App.js 가서 커넥트해주기

->리덕스 연결 끝!

 

4. 스토어에 있는 '값'을 각각 가지고 오게 연결해주기

-start.js부터 메꿔보기

 1)리덕스에서 빈칸 name 받아오기

 2) Dispatch 써서 input칸에 이름 적고 리덕스에 넣어보기!

 

5. Start 페이지에서 이름 입력하면 리덕스에 저장하기 

 + 다른것들 채워주고..(3주차 강의자료 마지막에 정답 코드 복붙)

 +마지막에 한마디하고 랭킹보러가기 버튼 누르면 

 '한마디 하기'텍스트랑, 이름, score 세개를 합쳐서 쏴주기.

 

---

2. 라우팅

1) 패키지 설치

yarn add react-router-dom

2) index.js가서 BrowserRouter

3) App.js가서 Route

 

리덕스

 

1) 패키지 설치

yarn add react-router-dom

2) 리덕스 폴더 만들어주기

3) quiz.js 모듈 채워주기

4) rank.js 모듈 채워주기

5) configStore.js 만들어주기

 

3. 스토어 연결

스토어 만든 다음에 뭐 해야한다? 붙여야한다!

붙일 때 어떻게 해?

-index.js 가서 Provider사용

1) Provider를 통해 주입해줄 스토어 임포트

2) Provider 임포트

3) 적용

-App.js 가서 커넥트해주기

커넥트 어떻게 해줘?

임포트부터 시작!

1) react-redux에서 connect 함수 가져오기

2) mapStateToProps, mapDispatchToProps 함수 만들어주기

3)connect로 감싸서 연결해주기

->리덕스 연결 끝!!

 

4. 스토어에 있는 '값'을 각각 가지고 오게 연결해주기

1) start.js부터 메꿔보기

start.js에 있는 빵꾸는 이름! 이름은 어디에다 넣었게?

quiz.js에 들어있음! 퀴즈 안에 들어있으면 이거 어떻게 가져와?

일단 Start.js로 가보자.

 

여기에서 import

상태 조회는 useSelector, 액션 생성은 useDispatch

Hooks | React Redux (react-redux.js.org)

Hooks | React Redux

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

성공!!

다음 단계로 Dispatch 하나 더 써서 input칸에 이름 적으면 리덕스에 넣어보기!

그럼 넣을 때 어떻게 해줘?

일단 Start.js 다시 가보기.

 

1)Dispatch 쓸 준비 하기

2)이름을 넘길거니까 input에 ref 먼저 걸어주기

3) 시작하기를 누르면 리덕스에 넣을거니까, 그러면 누르는 부분에서 dispatch를 해줘야겠구나.

누르는 부분은 onClick하면 되겠고 그 안에 dispatch를 해주자.

근데 dispatch안에 액션 넣어줘야 하는데 무슨 액션 넣어줘야하지?

이름을 추가하는거니까, 이름 넣는 액션 해야겠네?

rank.js가서 Action보고 오면 되겠네.

근데 액션을 넣어? 아니지 액션 크리에이터를 넣어야지! ADD_USER_NAME의 액션 크리에이터 보자.

addUserName 복붙하면 되겠다.

 

다시 Start.js로 돌아와서 뭐부터해줘? 임포트부터 해줘야 쓸 수 있겠지?!!!

dispatch함수 안에 addUserName넣고 그 안에 파라미터로 ref 작업했던 친구를 넣어주자.

근데 이름 저장만하고 끝나는거 아니고, history 이용해서 클릭하면 어느 페이지 갈지 정해줘야지.

 

그리고 이름 넣고 시작하기 누르면..!

에러 뜸! 맵이 없다고 함. 우리 값이 바뀌니까 맵도 없어졌다고 하는것임.

고쳐주러 가보자.

그렇다. 리덕스에서 리스트를 가져와서 갈아끼워주면 되는 것이였다.

이쯤 되니까 또 까먹는다. 리덕스.. 어떻게..가져왔지?

연결을 하라고 하네. 근데 연결 어떻게 해줬지?

임포트부터!

그리고 퀴즈 어디서 가져와? 리덕스인 quiz.js에서 가져와.

일단 퀴즈 가져올거 담을 변수가 필요한데 퀴즈 가져오는건 유즈 셀렉터에서 하겠지?

 

에러해결! props.list로 되어 있던 걸 quiz로 바꿔주기.

 

5. Start 페이지에서 이름 입력하면 리덕스에 저장하기 

1)Start에서 시작하기를 누를 때 dispatch해서 이름부터 저장하기

어디에다 저장해? 퀴즈라는 상태값 안에다 저장해.

그리고 나서는 뭐해?

2) Quiz 페이지에서 퀴즈를 풀겠지?

이 문제푼거 점수 어디서 구해야 해? 

Score에서!!

근데 점수 구하는 방식에서 이 문제푼거 하나하나 지나갈때마다. 예를 들어 left, right, left, right 할 때마다 점수가 플러스 마이너스 되는건데.. 그 기능이 Quiz에 있음.

그 말은 Quiz.js에서 봐야한다는 소리

Quiz.js에서 onSwipe할 때 보면 됨.

오른쪽일 때는 X. 왼쪽일 때는 O

dispatch안의 addAnswer(true)라는 것은 quiz.js안의 answers 배열 안에 정답이면 true, 오답일 경우 false를 넘겨주겠다는 얘기임.정답의 문제가 몇갠지 알고 싶으면 이 answers의 길이를 구해도 되겠네.그리고 이 answers에서 true인 애들만 세면 정답 개수!

그래서  Score.js 안에는 어떻게 했나?

filter로 정답만 고름!

그 다음에 정답을 띄워줘야 하는데 그럼 텍스트가 어떻게 저장되어있는지 먼저 확인해보자.

커트라인처럼 저장되어 있구나.

그럼 다시 Score.js로 돌아와서 점수 뜨는것 보여주기

6. 중간중간 생략(3주차 강의자료 정답코드 복붙해서 붙여주고 모를때 찾아보기)

7. 마지막에 한마디하고 랭킹보러가기 버튼 누르면 

 '한마디 하기'텍스트랑, 이름, score 세개를 합쳐서 쏴주기.

8. Message.js 보기

rank에 넣어뒀던 user_name 가지고 오고 

점수계산 하려면 quiz에 있는 answers가지고 와야 할거고

한마디 가지고 와서 한번에 쏴주면됨. 그러니까 input_text의 ref 잡을거고

그 다음엔 똑같이 점수계산!

버튼 눌렀을 때는 점수 계산한거 정수형으로 넣어주기

current는 왜 넘겨? 

내가 지금 한 것 , 내가 지금 작성한 거에 하이라이트 주려고 넘김

하이라이트 되고, 내가 입력한 이름, 텍스트, 그리고 정수로 등수까지 뽑아서 나올 수 있는 것 확인!