React 후크 패러다임

React it 클래스 기반 접근 방식에 대해 가장 먼저 배우는 것은 다음과 같습니다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

언뜻 보기에 새로운 사용자를 혼란스럽게 할 수 있습니다. 모든 단일 함수에 대해 새 클래스를 만들어야 하는 이유는 무엇입니까? 글쎄, 이것이 당신의 기능이 React 생태계의 일부가 되도록 하는 방법입니다.

WebComponent를 생성하는 유사한 접근 방식이 있습니다.

class PopUpInfo extends HTMLElement {
  constructor() {
    super();
    // write element functionality in here
    ...
  }
}

이것은 WebComponents가 객체 지향 접근 방식을 특징으로 하기 때문에 비슷하지만 다릅니다. 새 구성 요소가 HTML 생태계의 일부가 되도록 하려면 HTMLElement 또는 그 종속 항목 중 하나를 확장해야 하지만 일반적으로 전체 기능 및 상태 관리를 포함하는 다소 복잡한 개체에 대해 하나의 클래스만 있습니다.

React의 경우 상황이 다릅니다.

the-functional-side-of-react에서 우리는 react 뒤에 있는 개념에 대한 포괄적인 설명을 찾습니다.

However, under the Object-Oriented dress, React hides a functional nature. The main constraint for a React component is to implement a render() method. The render() method returns a React element, that is the component’s markup defining its appearance. In other words, React is requiring that any component must have an output... (So)... you can think of React components as functions.

따라서 react는 클래스 기반 객체를 사용하지만 클래스를 일급 함수로 사용하기 위해 개념에 몇 가지 제약 조건을 적용합니다.

The functional programming paradigm aims to avoid the use of the state in an application. React’s development guidelines promote the creation of stateless components, that is components not using the state property. This should grant that the output of a component only depends on its props. A stateless component looks a lot like a pure function, and indeed it is.

따라서 React는 클래스를 사용하지만 객체가 제공하는 상태 관리의 용이성을 이용해서는 안됩니다. 대신 기능적 접근 방식을 따릅니다.

This strategy corresponds to the pattern that asks the developer to use the state in the higher component in a component hierarchy. In other words, a component hierarchy should have in its root a stateful component, while its descendants should be stateless components.

지금까지는 개념이 명확해 보이지만 반응documents에서는 명확하지 않은 예가 많이 있습니다.

You can use stateless components inside stateful components, and vice versa.

후크는 어떻습니까?

기능적 패러다임을 사용할 때 가장 중요한 규칙은 부작용을 방지하는 것입니다. 순수 기능을 사용하면 상태 관리를 기능적 논리에서 분리할 수 있습니다.

react -> hooks-overview에서 다음을 찾습니다.

The Effect Hook, useEffect, adds the ability to perform side effects from a function component

이것이 바로 우리가 여기에서 발견한 것입니다:

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

여기서 우리는 매개변수가 아니라 외부 참조로 함수 외부에서 상태를 가져옵니다.

이 개념의 실마리를 찾으려고 정말 노력했지만, 어떤 패러다임을 따르는 것보다 더 더러운 해킹인 것 같습니다. 이것을 React Hacks라고 불러야 할까요?

어떤 조명이든 환영합니다.