(물론 아직 사용하지 않는 경우).

빠른 소개

최근에는 업무의 일부로 React 앱을 개발하고 있습니다. 우리는 기존의 "클래스"방식을 사용하여 일반적인 React + Redux로 작업하고 있습니다(여전히 완전히 유효하므로 오해하지 마세요). 하지만 후크는 꽤 오랫동안 사용되어 왔으며 놀랍습니다. 그들이 왜 그런지 보여주고 당신이 그것들을 사용하도록 설득할 기회를 주십시오.

리덕스

이전에 Redux로 작업한 적이 있다면 다음과 같은 방법을 알고 있습니다.

스토어 생성

스토어 내에서 애플리케이션을 랩핑하십시오

구성 요소를 HOC(고차 구성 요소)와 연결

mapStateToProps 및 mapDispatchToProps 함수를 생성하고 연결에 테제를 적용했습니다 ...

우리가 매일 하는 아주 기본적인 것들, 당신을 도울 VSC 스니펫이 있을 수도 있습니다.

상태

잠시 Redux를 떠나자. 어떻게 상태를 선언하겠습니까?

구성 요소 만들기

생성자와 수퍼를 호출합니다.

this.state 변수를 만들고 값으로 채웁니다

.

~ 잠깐, 현실 세계의 예에는 더 많은 것이 있습니다 ...
~ 맞습니다. 몇 가지 수명 주기를 추가해 보겠습니다.

수명 주기

모든 실제 앱에서 API 엔드포인트에서 일부 데이터를 수집해야 합니다. 그렇게 하는 가장 좋은 장소는 ComponentDidMount 내입니다. 때로는 특정 업데이트에 적용해야 하는 경우도 있습니다. 이때 ComponentDidUpdate가 유용합니다. 그리고 물론 구독을 ComponentWillUnmount로 정리해야 합니다...

기억해야 할 것들이 많죠? 그리고 쓰는 방법도 많다.

~ 10줄 이상의 선언을 3줄로 변환할 수 있다고 말할 수 있다면 어떨까요?
~ 하지만, 어떻게?!

React Hooks 기능을 사용하면 이것이 제가 여러분에게 시도해 보도록 설득하는 방법입니다.

일반 클래스 스타일의 예

우리가 이야기한 모든 것을 이 컴포넌트 안에 넣어봅시다...

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // State ..
      user: {},
    };
  }

  componentDidMount() {
    // Fetch API endpoint
  }

  componentDidUpdate(prevProps, prevState) {
    // Apply effect based on changes ..
  }

  componentWillUnmount() {
    // Cancel subscriptions ..
  }

  render() {
    return <div>// Your app tree</div>;
  }
}

const mapStateToProps = (state) => {
  return {
    // Return some element from your state ..
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    //Return some functions that dispatch for you in the store ..
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

보시다시피 로직 특정 코드와 JSX가 없으면 필요한 최소 코드 양이 상당해지기 시작합니다.

기능 구성 요소 예

이제 재미있는 부분인 Hook을 사용하여 모든 것을 다시 작성해 보겠습니다. 걱정하지 마세요. 단계별로 처리해 드리겠습니다.

먼저 상태를 초기화해 보겠습니다.

import React, { useState } from 'react';

const App = () => {
  const [user, setUser] = useState({});

  return <div>// Your app ..</div>;
};

export default App;

여기서 무슨 일이 일어나고 있는지 요약해 보겠습니다. 값을 반환하는 useState()라는 React Hook과 이 값을 업데이트하는 메서드를 사용합니다. 우리는 또한 아주 멋진 하나의 라이너를 얻기 위해 nice destructration synthax를 사용합니다.
(useStatehere에 대한 추가 정보).

다음으로 수명 주기를 추가해 보겠습니다.

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

const App = () => {

    const [user, setUser] = useState({});

     useEffect(() => {

        // Equivalent of componentDidUpdate

        return () => // Equivalent of componentWillUnmount

    }, []); // Equivalent of componentDidUpdate.
    // It's an array of dependencies, add values there,
    // and React will re execute the useEffect whenever one of value changes

    return (
        <div>
            // Your app ..
        </div>
    )};

export default App;

놀랍지 않나요? 더 많은 정보를 찾을 수 있습니다here. 그러나 기본적으로 React는 첫 번째 렌더링에서 useEffect 내부에 있는 것을 항상 실행하고 배열에 전달된 값을 관찰하여 효과를 다시 실행합니다. 구성 요소가 마운트 해제될 때 실행하려는 항목을 반환합니다.

마지막으로 Redux를 사용합시다.

import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const App = () => {

    const [user, setUser] = useState({});

    const dispatch = useDispatch(); // Give access to the dispatch function
    const foo = useSelector(state => state.foo); // Recover the value from the store

    useEffect(() => {

        // Equivalent of componentDidUpdate

        return () => // Equivalent of componentWillUnmount

    }, []); // Equivalent of componentDidUpdate. It's an array of dependencies, add values there, and React will re execture the useEffect whenever one of value changes

    return (
        <div>
            // Your app ..
        </div>
    )};

export default App;

코드는 매우 간단합니다. 몇 가지 매우 기본적인 사용법만 구입하면 더 많은 정보를 수집할 수 있습니다here. 그러나 기본적으로 이제 mapDispatch 및 mapState 없이도 디스패치 기능과 원하는 값에 액세스할 수 있습니다. 연결도 없이 구성 요소는 이제 암시적으로 연결됩니다.

결론

글쎄, 정말로 결론을 내릴 것이 없습니다. 그러나 잠시 시간을 내어 두 코드 조각을 비교하십시오. 결과는 놀랍습니다. 똑같은 작업을 수행하기 위해 너무 많은 코드를 저장했습니다.
반응 공식 문서here를 링크하겠습니다. 클래스에서 후크로 놀라운 변환을 수행하는 youtube 비디오로 스크롤할 수 있습니다.

자, 말해보세요. 당신은 그들에게 한 번 시도해 볼 자신이 있습니까?

Othrys website에서 원본 기사를 찾을 수 있으며 이 기사에 대해 토론하려면 여기에서 나를 팔로우하거나 태그를 지정할 수 있습니다.

좋은 하루 되세요.