본문 바로가기

내마음대로만들어보자/React58

[Progress] 우정테스트 사이트 만들기(Feat.리액트) 이번에는 퀴즈를 풀때마다 진행바 같은걸 만들어서 얼마나 진행되었는지 볼수있도록 만들어보자. Progress.js import React from "react"; import styled from "styled-components"; import { useSelector } from "react-redux"; const Progress = (props) => { // 퀴즈 리스트 가지고 오기 const quiz_list = useSelector((state) => state.quiz.quiz); // 유저 답 리스트 가지고 오기 const answers = useSelector((state) => state.quiz.answers); // 답 리스트 갯수 세기 let count = answers.lengt.. 2021. 8. 12.
[Store] 우정테스트 사이트 만들기(Feat.리액트) 2021. 8. 11.
[Router/Redux] 우정테스트 사이트 만들기(Feat.리액트) 이번에는 퀴즈를 풀고나서 점수를 확인하고 대상에게 한마디를 남기고 랭킹정보를 볼 수 있도록 화면을 만들어보자 이때, 각화면을 라우팅시키고 데이터를 리덕스에넣어 적용시켜보자 1. 뷰 만들기 - Ranking.js - Message.js 잊지않도록 기본형태는 다시한번 짚고넘어가자. * Ranking.js import React from "react"; import styled from "styled-components"; const Ranking = (props) => { return ( position fixed :제목부분 list list ... map 돌려서 랭킹정보를 보여준다. ) } export default Ranking; Message.js는 Start.js와 내용만다르고 똑같은 형태이기때문에 .. 2021. 8. 9.
[EventListener 코드설명] 우정테스트 사이트 만들기(Feat.리액트) * SwipeItem.js 전체코드 import React from "react"; import styled from "styled-components"; import img from "./scc_img01.png"; //memoziation 은 여러번 랜더가 이루어지지않게 방어해준다고 보면된다. React.memo() const SwipeItem = React.memo(({ onSwipe }) => { const swipe_div = React.useRef(null); //함수형컴포넌트에서 ref잡는법 // 현재 swipe 상태 let swipe_status = "ready"; //나중에 이친구가 애니메이팅 효과를 주기위해 미리 작성한 코드 (스와이프했을때 자연스럽게 움직이게 하기위함) let targ.. 2021. 8. 9.