Feb 2019에서 React 갈고리는 React 커뮤니티에 도입되었다.
(16.8절).
이 새로운react 특성은 모든react 개발자가 직면하는 가장 큰 문제 중 하나를 해결했다.
질문 부분을 건너뛸 수 있지만, 리액션 개발자가 갈고리를 리액션으로 가져오도록 하는 이유를 알아보는 것이 좋습니다.

문제.

렌더링 도구 - 연결 전에 기능 구성 요소가 무상태이기 때문state needs to be passed to the functional component through props, 응용 프로그램too large이라면 drilling of props은 개발자가 겪어야 하는 obstacle 중 하나이다.

고급 구성 요소인 HOC는 전원 공급 장치와 유사한 상태를 추가로 제공하기 위해 구성 요소를 봉인하지만 응용 프로그램의 규모와 응용 프로그램이 너무 추상적으로 변하면서 wrap hell도 만든다.

이제 갈고리를 탐색해보도록 하겠습니다.💥

갈고리

갈고리는 단지 하나의 함수일 뿐,react의 핵심 특성을 갈고리로 연결하여 기능 구성 요소에 추가 특성을 제공한다.
예를 들어 상태useState(), 생명주기useEffect()

useState

useState()는 갈고리 함수로 개발자가 기능 구성 요소에서 상태를 사용할 수 있도록 한다.import

import {useState} from 'react'

usage of useState

const [stars , setStars] = useState(3)

항성은 초기치 3을 가지고 있는데 마치 초기치의 상태와 같다.

setStars는 별을
이거.상태를 설정합니다.

useState에서 초기 값을 수신합니다.

useState를 반복해서 사용하면 여러 개의 상태 변수를 설정할 수 있습니다.

const [stars , setStars] = useState(3)
const [movie , setMovie] = useState("The martian")
const [userInfo , setUserInfo] =useState({
 userName:"john",
 email: "[email protected]"
})

useState 예

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [stars, setStars] = useState(3);
  return (
    <div className="App">
      <h1>Welcome to netflix </h1>
      <h2>The Martian</h2>
      <button onClick={() => setStars(stars + 1)}>Change Rating</button>
      <h1>{stars}⭐</h1>
    </div>
  );
}

Output
Demo
setStars는 이전 값에 값을 추가하여 별표의 값을 설정합니다.그래서 매번 버튼을 누르면 별이
증분
따라서useState는 기능 구성 요소의 상태를 변경하고 설정할 수 있습니다.
우리가 새로운 상태 값을 설정할 때마다 구성 요소가 다시 시작됩니다.

사용 효과

useEffect()는 갈고리 함수로 개발자가 하나의 생명주기 방법을 사용할 수 있게 한다. 예를 들어
기능 구성 요소의 componentDidMount(), componentDidUpdate(), componentWillUnmount().import

import {useState , useEffect } from 'react'

이 기능은 렌더링할 때마다 실행되며, 대부분의 부작용 (예를 들어 네트워크 요청, 구독) 은 이 기능에서 실행됩니다.

useEffect(()=>{
// network requests
}  
 ,[ ])

useffect () 에는 함수와 그룹 변수가 두 개 있습니다.

함수는 그 다음에 실행할 코드를 포함한다
매번 렌더링.

배열은useEffect를 실행할 상태 변수의 이름을 포함합니다.

useEffect () 함수는 다음에 다시 렌더링/업데이트할 때마다 실행되기 때문에, 성능을 향상시키기 위해, 두 번째 인자를 추가해서 React가 실행을 건너뛰는 것을 알려줄 수 있습니다. 이 인자는 감시할 상태 변수 목록을 포함하는 그룹입니다.이 배열의 항목이 변경되면 React는 부작용만 다시 실행됩니다.

많은 영어는 코드를 통해 이해하게 한다useEffect.
이 예에서 우리는 간단한 책갈피 프로그램을 만들 것이다.
이 응용 프로그램은 API에서 책갈피를 추가할 수 있는 게시물을 가져옵니다.
이렇게!적용:).

Demo

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [post, setPost] = useState("");
  const [status, setStatus] = useState("Requesting....");
  const [display, setDisplay] = useState("none");

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => {
        setPost(json.title);
        setStatus("Recieved");
        setDisplay(" ");
      })
      .catch((err) => {
        setStatus("Error");
      });
  });
  return (
    <div className="App">
      <p>{status}</p>
      <p>{post}</p>
      <button style={{ display: `${display}` }}>BookMark</button>
    </div>
  );
}

이것은 많은 코드입니다. 맞습니까?
우리 블록을 나누어 이 점을 이해합시다.

주 부분

we have 3 state variable in this small app

const [post, setPost] = useState("");
const [status, setStatus] = useState("Requesting....");
const [display, setDisplay] = useState("none");

Postapi

로부터 받은 댓글을 저장하는 데 사용

status 기본적으로 요청 상태 추적
(요청 또는 수신).

display 책갈피 버튼의 표시를 전환합니다.

Jsx 위젯

<div className="App">
      <p>{status}</p>
      <p>{post}</p>
      <button style={{ display: `${display}` }}>BookMark</button>
</div>

요청 및 게시 상태가 버튼과 함께 페이지에 표시됩니다.

유효 부분

useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((json) => {
        setPost(json.title);
        setStatus("Recieved");
        setDisplay(" ");
      })
      .catch((err) => {
        setStatus("Error");
      });
  });

우리가 알고 있는 바와 같이 사용 효과는 기본적으로 부작용(API 요청)을 수행하는 데 쓰인다.분명히 useEffect 함수에서 API 요청을 보낼 것입니다.

fetch API

로부터

저희가 댓글을 검색하면 setStatus가 상태를 설정합니다.setStatus(received)에 도착하면 저희 단추의 표시는setDisplay(" ")로 전환합니다.

프로세스와catch() 상태를 설정Error ;

현재, 우리 작은 useEffect 프로그램이 완성되었습니다.
나는 이 문장이 네가 갈고리의 기본 개념을 이해하는 데 도움을 줄 수 있기를 바란다😄.
갈고리에 대한 내용도 많으니 공식 서류도 확인해 주세요.