[React] json파일 불러와서 랜덤으로 띄우고 점수 시스템 만들기

이번에는 보고 타자연습을 할 글귀를 불러오고, 맞았는지 틀렸는지 점수 시스템 만들기~!

 

타수까지는 사실 목표에도 없고... 총 몇개 틀렸는지, 맞았는지 나중에 정확도 시스템만 넣을 계획이다

(물론 욕심나서 나중엔 몇타인지까지 넣을 수도 있겠지만 그것은 일단 후순위)

 

저번에는 Enter를 치면 단어가 초기화 되는 시스템을 만들었는데

1. 이번에는 Enter를 치면 랜덤 단어가 나오게하기

2. 점수 시스템

 

이렇게 만들어 봤다

결과물

JSON 파일 불러오기

//  datas/sample.json


[
    {
        "id" : "1",
        "value" : "안녕하세요"
    },
    {
        "id" : "2",
        "value" : "안녕히가세요"
    },
    {
        "id" : "3",
        "value" : "안녕"
    },
    {
        "id" : "4",
        "value" : "메롱"
    },
    {
        "id" : "5",
        "value" : "잘 먹었습니다"
    }
]

간단하게 데이터가 5개 들어있는 sample.json 파일 생성

 

필요한 곳에서 import만 해주면 간단하게 사용할 수 있다

타란

딱히 뭐 없음

import React, { useRef, useState } from 'react';
import sample from "../datas/sample" // 데이터를 사용할 파일에서 import를 해줬당

function Content() {

    return (
        <>
            <div>
                <div>
                    {sample[0].value} // json 첫번째 단어를 불러옴
                </div>
                <div>
                    <input type='text'
                        id='filed'
                        onKeyDown={handlePress}
                        ref={inputRef}>
                    </input>
                </div>  
            </div>
        </>
    );
}

export default Content;

이렇게 짜면 일단 JSON 파일의 첫번째 데이터인

'안녕하세요'

가 불러와지는데, 내가 필요한건 Enter이후 랜덤으로 단어가 바뀌는거라 랜덤 숫자를 받아올 수 있어야 한다.

0 ~ 4 사이에 숫자가 랜덤으로 생성되는 함수를 만들었다

랜덤함수

const handlePress = (e) => {
        console.log(e.key)
        if(e.key === 'Enter'){
            setNumber(Math.floor(Math.random()* 5))
            textClear()
        }
    }

<div className='typing-text'>
	{sample[number].value}
</div>

json을 불러오는 곳에서 랜덤으로 만들어준 값에 해당하는 값을 불러오도록 하면 된당

 

점수시스템

그러면 이제

내가 입력한 값이 랜덤으로 불러온 텍스트와 일치하는지 확인하고 점수를 올리는 시스템을 만들면되는데

 

useState사용하면 간단

 

    const [oNum, setONum] = useState(0); // 맞은 값 
    const [xNum, setXNum] = useState(0); // 틀린 값

일단 0으로 초기값을 두고 Enter 함수에 if 문으로 값을 비교해서 점수롤 올리는 시스템을 만든다

    const handlePress = (e) => {
        console.log(e.key)
        if(e.key === 'Enter'){
            if(e.target.value === sample[number].value){
                setONum(oNum + 1) // 맞았을 때
            }
            else{
                setXNum(xNum + 1) // 틀렸을 때
            }
            setNumber(Math.floor(Math.random()* 5))
            textClear()
        }
        
    }

sample[number].value 값과 비교해서 현재 입력된 값이 일치하면 setONum으로 ONum 값 +1

틀리면 setXNum으로 XNum 값 +1을 해준다

 

근데 이렇게 보니깐 ＼(º □ º l|l)/ 함수 분리해야겠는데ㄷㄷ

 

마무리

contents와 InputBox를 분리하려고 보니깐... 이미 함수를 Contents에 때려박아놨음

형상관리도구는 이번에 사용할 계획이 없기 때문에 inputBox데이터를 content에 보내려면 값을 main에서 관리해야할 것 같은데

이미 Conents에 다 만들어져있어서 대대적 수술이 필요해졌다

 

역시 프로젝트는 처음 기획부터 찬찬히 해야한다...

화면 구성부터 다시해야할 듯...

말하는 감자 우러