React Hooks부터.

몇 년 전에 나는 class components vs stateless functional components에 관한 글을 썼는데, 왜 너는 하나하나를 사용해야 하는지.본고를 작성할 때 이것은 두 가지 유형의 구성 요소로 많은 개발자들이 기능 구성 요소와 상태와 생명주기 방법을 결합시켜 사용하는 방법을 찾기를 갈망한다.
"구시대"로 돌아가 상태나 생명주기 방법에 접근하려면 클래스 구성 요소를 사용해야 합니다.이것은 대량의 불필요한 클래스 구성 요소를 초래하여 그들이 필요로 하는 상태를 방지하거나 converting stateless functional components over to class components의 많은 시간을 초래했다. 기능 구성 요소의 수요에 변화가 생겼기 때문에 클래스 구성 요소만 제공할 수 있는 것이 필요하다.

다행히 리액트 뒤의 팀은 이런 불평을 듣고 행동을 취했다.리액트 16이 발표되면서'갈고리'라는 것이 등장했다.이 연결고리들은 상태, 생명주기 방법, 그리고 기능 구성 요소의 더 많은 기능을 사용할 수 있습니다!오늘, 나는 당신에게 더욱 흔히 볼 수 있는 갈고리를 어떻게 사용하는지, 그리고 자신의 사용자 정의 갈고리를 어떻게 만드는지 보여 드리겠습니다.

useState 갈고리

아마도 가장 자주 사용하는 갈고리는 useState 갈고리로 상태 항목을 만드는 데 쓰일 것이다.갈고리에서 상태에서 데이터 자체와 상태를 업데이트하는 방법을 얻을 수 있습니다.다음은 어셈블리에 useState 연결 고리를 사용하는 예입니다.

import React, { useState } from 'react';

const MyComponent = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Number of Clicks: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Click Me!
            </button>
        </div>
    );
}

위의 코드는 간단한 예로 이 갈고리가 어떻게 작동하는지 보여 준다.우선 React 라이브러리에서 useState 명명 변수를 가져옵니다. (원한다면 React.useState도 사용할 수 있습니다.)다음에 수신 변수 그룹의 상수를 만들 것입니다. 첫 번째는 상태에서 온 데이터 자체이고, 두 번째는 이 상태 항목의 데이터를 업데이트하는 방법입니다.이 이름들은 임의로 저장된 데이터를 대표해야 합니다.방법명의 표준약정은 set으로 시작하고 데이터 변수의 카멜케이스 이름과 뒤따른다.
상태를 만든 후 데이터 변수(예에서 count)를 사용하여 데이터를 출력하고 업데이트 방법(예에서 setCount)을 사용하여 상태를 변경할 수 있습니다.업데이트 방법에 전달되는 매개 변수는 상태가 설정되어야 하는 값입니다.
축하합니다!너 방금 첫 번째 갈고리 썼어!

useState와 함께 TypeScript 사용

true 파일에서 strict를 tsconfig.json으로 설정한 항목에서 TypeScript를 사용할 때 undefined 값의 변수를 사용할 수 없는 오류가 발생할 수 있습니다.해결 방법은useState 갈고리를 호출할 때 예상 형식을 설정하는 것입니다.다음 코드는 강조 표시된 행에서 이 작업을 수행하는 방법을 보여 줍니다.

import React, { useState } from 'react';

const MyComponent = () => {
    const [count, setCount] = useState<number>(0);
    return (
        <div>
            <p>Number of Clicks: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Click Me!
            </button>
        </div>
    );
}

효과 연결

두 번째로 가장 자주 사용하는 갈고리는 아마도 useEffect 갈고리일 것이다. 이것은 우리가 생명주기 방법에 접근할 수 있게 한다.하나의 클래스 구성 요소에서 몇 가지 생명주기 방법은 구성 요소의'생명주기'에서 서로 다른 시간에 일을 발생시키는 데 사용할 수 있다.이 중 가장 많이 사용되는 것은 componentDidMount과 componentDidUpdate입니다. 이것은 구성 요소를 불러오고 렌더링한 후에 일부 작업을 수행할 수 있도록 합니다.
useEffect 갈고리는 이 두 가지 생명주기 방법을 대체하고 구성 요소가 렌더링된 후에 작업을 수행할 수 있도록 합니다.갈고리가 언제 실행될지 결정하는 의존항을 전송할 수 있도록 해 줍니다. 이것은 성능 향상에 도움이 될 것입니다.특히 구성 요소 중에는 여러 개의 useEffect이 연결되어 서로 다른 의존항의 변경에 적응할 수 있다.다음 코드에서는 기능 구성 요소에 useEffect 후크를 사용하는 방법에 대해 설명합니다.

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

const MyComponent = () => {
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setLoading(false);
    }, []);

    return (
        <div>
            <p>Is page loading? {loading.toString()}</p>
        </div>
    );
}

위 코드에서 useEffect 갈고리에 사용되는 문법을 볼 수 있습니다.이것은 두 개의 매개 변수를 받아들이는 함수입니다. 다른 하나는 실행할 논리를 가진 함수와 일련의 의존항입니다.구성 요소의 갈고리에 접근 문제가 없습니다.이 예를 보십시오. 나는 상태 loading을true로 설정합니다.페이지 렌더링이 완료되면 useEffect 갈고리를 호출합니다. 그 중에서 setLoading을 호출하고 상태를false로 변경합니다.이것은 마운트 모뎀을 표시하는 데 매우 유용하다.

useEffect 갈고리의 의존항

두 번째 인자로 빈 그룹을 전달한 것도 알 수 있습니다.이렇게 하면 useEffect 갈고리가 구성 요소가 렌더링된 후에 실행되기를 원하지만 다시 실행하지 않기를 알려 줍니다.필요할 때 다시 실행할 수 있도록 갈고리의 변경 사항을 감청하려면, 그룹에 감시할 변수를 추가하면 됩니다.다음 예제에서는 loading 상태를 true로 설정하고 loading 상태를 변경할 때마다 실행할 모니터링 의존 항목을 포함하는 버튼을 업데이트했습니다.

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

const MyComponent = () => {
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setLoading(false);
    }, [loading]);

    return (
        <div>
            <p>Is page loading? {loading.toString()}</p>
            <button onClick={() => setLoading(true)}>Reload Me!</button>
        </div>
    );
}

구성 요소에 이벤트 탐지기 만들기

어떤 경우, 구성 요소에 이벤트 탐지기를 만들어야 할 수도 있습니다.나는 그것을 사용하여 버튼 이벤트를 만들고 오른쪽 단추를 눌렀다.구성 요소에서 이 작업을 수행하려면 useEffect 훅에서 실행해야 합니다. 예를 들어 document 또는 window과 같은 브라우저 변수에 액세스하려면 구성 요소 렌더링을 기다려야 합니다.다음은 구성 요소에 이벤트를 추가하는 방법을 보여 주는 예입니다.

import React, { useEffect } from 'react';

const MyComponent = () => {
    const onKeyPress = (e) => {
        alert(`You pressed the ${e.key} key!`);
    }

    useEffect(() => {
        document.addEventListener('keydown', onKeyPress);
    }, []);

    return (
        <div>
            <p>My Component</p>
        </div>
    );
}

만약 네가 버튼으로 어떤 일을 한다면, 나는 https://keycode.info이 매우 유용하다는 것을 발견할 수 있다.
구성 요소가 마운트 해제될 때, 마운트 해제된 구성 요소를 호출할 수 없다는 추악한 오류가 콘솔에서 보입니다.이 문제를 해결하려면 useEffect 갈고리에 되돌아오는 함수를 추가하십시오. 이 갈고리는 구성 요소를 마운트 해제할 때 실행됩니다.위의 예제에 추가하면 강조표시된 선과 유사합니다.

import React, { useEffect } from 'react';

const MyComponent = () => {
    const onKeyPress = (e) => {
        alert(`You pressed the ${e.key} key!`);
    }

    useEffect(() => {
        document.addEventListener('keydown', onKeyPress);
        return () => { document.removeEventListener('keydown', onKeyPress); }   }, []);

    return (
        <div>
            <p>My Component</p>
        </div>
    );
}

useContext 갈고리

나는 또 다른 useContext이라는 갈고리를 언급할 것이지만, 이것은 React 상하문에 관한 전면적인 문장이 아니다.필요할 때 갈고리를 사용하는 방법을 간단하게 보여 드리겠습니다.우선, 무엇이 언어 환경입니까?연결 이외에 React 배후의 팀은 전역 상태 관리를 허용하는 특성을 추가했는데 이를 상하문이라고 부른다.이 도구를 사용하면 항목을 특정 구성 요소 이외의 상태로 유지하고 필요할 때 사용할 수 있습니다.
다음 예는 다른 파일에 food이라는 프로젝트의 상하문을 만들었고 상하문 제공 프로그램에서 이 프로그램을 포장했다고 가정합니다.useContext 제공 프로그램을 사용하려면 상하문 자체가 필요합니다.갈고리를 호출하면 위아래 문장의 특정 항목을 얻기 위해 해체를 사용할 수 있습니다.

import React, { useContext } from 'react';
import MyContext from './MyContext';

const MyComponent = () => {
    const { food } = useContext(MyContext);

    return (
        <div>
            <p>My favorite food is {food}!</p>
        </div>
    );
}

이 갈고리를 사용하면 상하문에 포함된 모든 상태를 가져와 공급자에게 전달할 수 있습니다.이것은 프로젝트에 '단일한 진실의 출처' 가 있는 것을 매우 쉽게 해 줍니다. 추가 라이브러리와 대량의 불필요한 코드가 필요하지 않습니다.

사용자 교육자 연계

Redux 배경에서 왔거나 더 복잡한 프로그램이 있다면 모든 상태 변경 사항을 추적해야 합니다. 어떻게 해야 합니까?이를 위해, React는 사용할 수 있는 useReducer 갈고리를 제공했다(네가 맞혔어!)너희 주의 감속기.useReducer 갈고리는 두 가지 파라미터를 받아들인다. 그것이 바로 감속기와 초기 상태이다.갈고리에서 감속기의 현재 상태와 상태를 업데이트할 수 있는 분배 함수를 얻을 수 있습니다.분배 함수는 항상 사용할 수 있기 때문에, useEffect처럼 useState 갈고리를 사용해서 호출할 필요가 없다.

import React, { useReducer } from 'react';

const initState = {
    slices: 8,
}

const reducer = (state, action) => {
  switch (action.type) {
    case 'TAKE_SLICE':
      if (state.slices === 0) return { slices: 0 };
      return { slices: state.slices - 1 };
    case 'PUT_BACK':
      if (state.slices === 8) return { slices: 8 };
      return { slices: state.slices + 1 };
    default:
      return;
  }
};

const MyComponent = () => {
    const [state, dispatch] = useReducer(reducer, initState);

    return (
        <div>
            <p>There are currently {state.slices} slices of pizza left.</p>
            <button onClick={() => dispatch({type: 'TAKE_SLICE'})}>Take a slice!</button>
            <button onClick={() => dispatch({type: 'PUT_BACK'})}>Put the slice back!</button>
        </div>
    );
}

이것은 Reducer가 있는 간단한 Redux 저장소와 크게 다르지 않기 때문에 이전에 이 라이브러리를 사용한 적이 있다면 매우 익숙해질 것입니다.Redux를 사용하지 않으면 디스패치에 작업 형식을 전달할 수 있습니다. 디스패치는 다음에 Reducer를 호출합니다.Reducer 내부에서 특정한 조작 유형을 탐지하고 탐지하는 조작 유형에 따라 상태를 업데이트하는 switch 문장을 만들 수 있습니다.
위의 예에서 TAKE_SLICE의 조작 유형을 정탐하여 slices의 변수를 하나(최소 0)로 줄이고 PUT_BACK의 조작 유형은 slices의 변수를 하나(최대 8)로 늘리고 있다.

갈고리도 있어요?

useMemo, useRef, useCallback, use 등 다양한 용도로 사용할 수 있는 연결고리도 더 많다.만약 당신이 이런 내용에 대해 더 많이 읽고 싶거나, 내가 말한 갈고리에 적합하지 않은 용례가 있다면, 당신은 React documentation for additional hooks을 볼 수 있습니다.그것은 몇 개의 추가 갈고리를 토론했고, 모든 갈고리에 예시와 문법을 제공했다.

사용자 정의 연결 만들기

필요한 갈고리가 없으면 사용자 정의 갈고리를 만들 수도 있습니다.이를 위해 갈고리 작업에 필요한 논리를 처리하는 함수를 만들 수 있습니다.다음은 이를 수행하는 방법의 예입니다.

import { useEffect, useState } from 'react';

export const useFetch = (url) => {
    const [data, setData] = useState(null);

    const handleFetch = async (url) => {
        const res = await fetch(url);
        const json = await res.json();
        return json;
    }

    useEffect(() => {
        setData(handleFetch(url));
    }, []);

    return data;
}

위의 코드는 매우 기본적이지만 이상적이지 않은 갈고리로 데이터를 얻는 데 사용되며 이를 어떻게 실현하는지 설명한다.그것은 useEffect이 실행될 때 URL을 가져와 데이터를 되돌려줍니다.어셈블리에서 이 갈고리를 호출하면 다음과 같습니다.

import React from 'react';
import { useFetch } from './useFetch';

const MyComponent = () => {
    const post = useFetch('https://some-fake-site.com');

    return (
        <div>
            <h1>{post.title}</h1>
            <div dangerouslySetInnerHTML={{__html: post.content}} />
        </div>
    )
}

사용자 정의 갈고리를 만들면 플러그인에서 논리를 추출하고 다시 사용할 수 있는 코드로 바꿀 수 있습니다. 그러면 구성 요소가 1마일 길이로 변하지 않고 진정으로 중복되지 않습니다.이것은 당연히 사용해야 할 물건이 아니지만, 만약 그것이 당신의 용례에 적합하다면, 그것은 가능하다.

결론

본고에서 나는 React에서 많은 유행하는 갈고리와 자신의 사용자 정의 갈고리를 어떻게 만드는지 소개했다.이 연결을 사용하는 장점을 보고 개발 도구 패키지에 추가할 수 있기를 바랍니다.예전과 같이 질문이나 댓글이 있으면 언제든지 트위터에 연락 주세요!