튜토리얼: 반응 갈고리 소개

Hangman 아이콘은 IconBros
이 자습서는 React 상태 및 라이프 사이클 개념을 이해한다고 가정합니다.

저희가 튜토리얼을 시작하기 전에.

이 강좌에서 우리는 작은 게임을 구축할 것이다.이것은 연결고리를 사용하여react 기능 구성 요소를 구축하는 데 습관이 된 실용적인 방법이다.게임을 구축할 때 따라갈 수 있도록 이 강좌의 모든 부분과 코드 세션을 훑어보겠습니다.
이 자습서는 다음 섹션으로 구성되어 있습니다.

이 강좌의 설정은 귀하께 입문 코드를 제공할 것

개술은 갈고리의 기초 지식과 역사를 깊이 있게 이해할 것이다

구축 게임은 React 개발에서 가장 흔히 볼 수 있는 갈고리

를 사용할 것이다.

시간 제한을 추가하면 게임 시간을 연장하여 시간 제한을 추가합니다

요약 논의 확대 및 요약

갈고리와 실제 조작을 이해하기 위해 게임의 기본 버전을 만들 때까지 따라할 수 있다.

우리는 무엇을 짓고 있습니까?

이 강좌에서, 우리는 React 갈고리를 사용하여 상호작용적인 망나니 게임을 구축할 것이다.
Hangman은 게이머가 한 번에 한 단어, 알파벳을 맞혀야 하는 클래식 게임이다.너는 게임으로 경기에 적응할 수 있다
https://www.hangmanwords.com/play
몇 가지 규칙이 게임에 적용되어 더 많은 복잡성을 증가시킬 수 있지만, 우리는 게임의 첫 번째 교체에 전념할 것이다.우리는 당신이 확장 부분에서 건의한 더욱 복잡한 용례에 대해 실험과 확장을 진행하도록 권장합니다.

선결 조건

이전에 React를 사용하고 어셈블리, 상태 관리 및 라이프 사이클 생성 방법을 숙지했다고 가정합니다.
우리는 또한 ES6의 특성인 arrow 함수,const,let 문장을 사용했다.ES6가 컴파일된 내용을 보려면 Babel REPL를 참조하십시오.
이 강좌에서 갈고리를 사용했습니다. 리액션 버전 16.8에 갈고리가 도입되었기 때문에 이 강좌에서 16.8을min.React 버전으로 사용해야 합니다.

자습서 설정

자, 시작합시다.
우리는 먼저react 프로그램을 만들고 싶습니다.처음부터 만들 수도 있고, 템플릿 코드를 줄이기 위해create react 프로그램을 사용할 수도 있습니다.본 강좌에서 우리는 create-react-app을 사용할 것이다.

npx create-react-app react-hangman
cd react-hangman
npm start

위 코드 세그먼트는 간단한 응용 프로그램 구성 요소가 있는 React 응용 프로그램을 만듭니다.본 강좌에서 구성 요소의 스타일과 테스트를 중점적으로 소개하지 않기 때문에 App.css와 App.test.js 파일을 계속 삭제합시다.현재 우리는 App.js 구성 요소를 포함하기 위해 간단하게 편집할 수 있다.본 강좌에서 우리는 중점적으로 소개할 것이다Hangman.Hangman.jsx

import React from 'react';
import Hangman from './Hangman';

const App = () => <Hangman />

export default App;

View the full code at this point

개술

이제 모두 준비됐으니 리액트 갈고리부터 알아봅시다.

갈고리가 뭐예요?

16.8 버전 이전에 React의 클래스 구성 요소는 상태를 관리하는 데 사용되었고 전체 생명주기 방법에 논리적으로 분포되었다.기능 구성 요소는 흔히 볼 수 있는 사용자 인터페이스를 추출하는 데 사용된다.React 갈고리를 사용하면 기능 구성 요소의 상태와 논리를 찾을 수 있으며, 이러한 상태와 논리는 생명주기 방법에서 전파될 것이다.관련 논리는 이제 분리가 아니라 한 곳에 놓을 수 있다.사용자 정의 연결을 구축함으로써 구성 요소 간에 논리를 공유할 수 있습니다.

게임 구축

첫 번째 교체의 일부로서, 우리는 비밀 단어를 표시하기를 희망한다. 예를 들어; 모든 자모를 차단하려면, 게이머들이 자모를 선택할 수 있도록 모든 자모표 a-Z를 열거해야 한다. 만약 이 자모가 비밀 단어의 일부라면, 그것은 자신만의 자모를 표시할 것이다.
이 비밀 단어가 망나니라고 가정해 봅시다.그러면 다음 표현식은 이 비밀 단어를 덮어야 합니다.App.js

"HANGMAN".split("").fill("_").join(" ")

기본 구성부터 시작하겠습니다._ _ _ _ _ _ _

import React from 'react';

export default function Hangman() {
    const word = "HANGMAN";
    const alphabets = ["A", "B", "C", "D", "E", "F", "G",
        "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
        "S", "T", "U", "V", "W", "X", "Y", "Z"];

    return  <div>
            <p>{word.split("").fill("_").join(" ")}</p>
            {alphabets
            .map((alphabet, index) => 
            <button key={index}>{alphabet}</button>)}
            </div>
}

이 상태에서 버튼을 클릭하면 아무 작업도 수행되지 않습니다.우리의 다음 단계는 알파벳표를 클릭하여 이 알파벳이 단어의 일부인지 아닌지를 추측하는 것이다.만약 자모가 확실히 단어의 일부분이라면, 그것은 나타날 것이고, 그렇지 않으면 드러나지 않을 것이다.이를 위해, 비밀 단어의 일부로 보일 수 있도록 정확한 추측 알파벳을 모두 보존해야 한다.현재 우리는 크로스 구성 요소가 지구화 데이터를 다시 렌더링하는 용례가 생겼다.나라가 필요해.React에서 state 갈고리를 사용하여 state를 주입하는 방법을 보여 줍니다.

국가 제휴

우리는 상태 갈고리를 사용하여 상태를 React의 기능 구성 요소에 주입할 수 있다.이 상태는 어셈블리가 다시 렌더링되는 동안 유지됩니다.Hangman.jsx는 우리가 사용할 수 있는 갈고리다.useState 상태의 현재 값과 상태를 설정하는 함수를 포함하는 쌍을 되돌려줍니다.클래스 구성 요소에서, 우리는 useState를 사용하여 유사한 조작을 한 적이 있다.보존해야 할 다른 값에 대해서는 구성 요소에서 여러 개this.setState를 사용할 수 있습니다.
우리는 망나니 부분에 대해 추측을 해야 한다.useState 갈고리를 사용하겠습니다.우리는 이 단어를 수정하여 아직 추측하지 못한 모든 자모에; 을 표시했다.

import React, {useState} from 'react';

export default function Hangman() {
    const word = "HANGMAN";
    const alphabets = ["A", "B", "C", "D", "E", "F", "G",
        "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
        "S", "T", "U", "V", "W", "X", "Y", "Z"];
    const [correctGuesses, setCorrectGuesses] = useState([])    

    const maskedWord = word.split('').map(letter => 
    correctGuesses.includes(letter) ? letter : "_").join(" ");

    return  <div>
            <p>{maskedWord}</p>
            {alphabets
            .map((alphabet, index) => 
            <button key={index} onClick={() => {
                if (word.includes(alphabet)) {
                    setCorrectGuesses([...correctGuesses, alphabet])
                }
            }}>{alphabet}</button>)}
            {!maskedWord.includes("_") && <p>You won!</p>}
            </div>
}

시한을 늘리다

이제 우리는 이 게임에 규칙을 추가하는 공평하고 효과적인 해결 방안이 생겼다.단어를 추측하는 최대 시간은 2분으로 제한되며, 2분 이내에 단어를 맞히지 못하면'게임 끝'을 표시합니다.
이런 상황에서 우리는 시간 초과를 주입해야 한다.시간 초과는 이 게임의 결과에 영향을 줄 것입니다.이 시간 초과 논리를 구성 요소에 추가하는 방법에 대해 effect 갈고리를 보여 줍니다.

효과 연결

효과 연결고리는 React에서 가장 자주 사용하는 연결고리이다.이것은 종속 변수가 변할 때 실행하는 함수 (effect) 를 받아들인다.effect (side effect의 줄임말) 갈고리는 구성 요소의 부작용인 DOM 요소 조작, 데이터 얻기, 구독 등을 관리하는 데 사용됩니다. 이 예에서는 useState 시간 초과를 설정할 것입니다.기본적으로 useEffect 는 모든 구성 요소의 렌더링을 실행합니다. useEffect 인자로 언급되지 않은 경우, 이 경우, 구성 요소의 첫 번째 렌더링 기간에만 실행됩니다.

import React, { useEffect, useState } from 'react';

export default function Hangman({duration = 120000}) {
    const word = "Hangman".toUpperCase();
    const alphabets = ["A", "B", "C", "D", "E", "F", "G",
        "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
        "S", "T", "U", "V", "W", "X", "Y", "Z"];
    const [correctGuesses, setCorrectGuesses] = useState([])
    const [timeUp, setTimeUp] = useState(false);

    useEffect(() => {
        const timeout = setTimeout(() => {
            setTimeUp(true);
        }, duration);

        return () => clearTimeout(timeout);
    }, [])


    const maskedWord = word.split('').map(letter => correctGuesses.includes(letter) ? letter : "_").join(" ");
    return (
        <div>
            <p>{maskedWord}</p>
            {alphabets.map((alphabet, index) => <button key={index} onClick={() => {
                if (word.includes(alphabet)) {
                    setCorrectGuesses([...correctGuesses, alphabet])
                }
            }}>{alphabet}</button>)}
            {timeUp ? 
            <p>You lost!</p> : 
            !maskedWord.includes("_") &&  <p>You won!</p>}
        </div>
    );
}

타임업 상태를 저장하려면 []를 사용합니다.useState의 두 번째 매개 변수에서 useEffect를 언급했기 때문에 시간 초과는 Hangman의 첫 번째 렌더링 기간에만 설정됩니다.마지막으로, 구성 요소가 게임이 끝난 후에 마운트 해제되었을 때, 우리는 []에서 효과를 지웠다.이것은 구독을 취소하고 효과에 사용된 자원을 정리하는 데 사용할 수 있습니다.

마무리

축하합니다!너는 망나니 놀이가 하나 있다.

망나니 역을 맡아달라

시간 상한선이 있습니다

우리는 네가 이미 기본적인 기교를 익혔으면 한다.
이 강좌는react hooks를 배우기 시작하도록 합니다.우리는 더 많은 갈고리를 탐색할 수 있도록 격려할 것입니다. 예를 들어useContext,useHistory, 자신의 맞춤형 갈고리를 만들 수 있습니다.등등. 연결에 대한 상세한 설명here을 살펴보자.
많은 규칙을 응용할 수 있고, 게임은 더욱 확장할 수 있다.이것은 아주 좋은 단련이 될 것이다. 너는 이 기능 부품에 손을 연결시키는 것을 시도해 볼 수 있다.

허용되는 최대 추정치는 6

타이머의 남은 표시 시간

모음에 대한 추측 제한

테마 기반 단어 목록 가져오기

this 리포에서 코드 예시를 찾을 수 있습니다.전화[email protected]에 문의하여 피드백을 받으십시오.게임을 확장하기 위해 PRs를 제출할 수도 있습니다.