여보게, 동료들!
갈고리는 React에서 더 이상 신기한 것이 아니지만, 여전히 많은 문서들이 React 구성 요소의 종류를 통해 전통적인 개발 모델을 보여주고 있다.
나는 일련의 소개적인 글을 써서 주요적인React 갈고리를 토론할 것이다. 그 중에서useState(이것은 우리의 첫 번째가 될 것이다),useEffect와useContext를 포함한다. 그리고 우리는 일부 사용자들에게 더욱 복잡한 갈고리, 예를 들어useRef,useCallback,useReducer 등을 소개할 것이다.당신은 또한 자신의 갈고리를 만들 수 있습니다. 이것은 어떤 경우에 매우 유용합니다. (우리는 다음 글에서 볼 수 있습니다. 당신의 평론을 남겨 주십시오.)

이론

갈고리가 뭐예요?

요컨대 갈고리는 함수일 뿐입니다. 갈고리는 React의 기능 구성 요소의 일부 특성 (예, 기능 구성 요소. 갈고리가 클래스에서 작동하지 않기 때문에) 에 접근할 수 있습니다. 그러면 상태와 생명 주기에 접근할 수 있습니다.
구성 요소에서 상태와 생명주기를 나타낼 때 좋은 성능을 얻기 위해 갈고리는 기본 규칙이 있습니다. 갈고리는 순환, 조건 규칙(예를 들어 만약)이나 삽입 함수에서 영원히 사용하지 말아야 한다고 지정합니다. 이 규칙을 주의하세요!

손대다

useState

const [state, setState] = useState(initialState);

이 갈고리는 응용 프로그램의 상태를 조종하는 것을 책임진다.그것은 우리에게 하나의 수조로 되돌아왔다. 그 중에서 우리는 하나의 값과 하나의 함수를 가지고 있으며, 이 함수를 호출할 때, 이 값의 정보를 변경하는 것을 책임질 것이다.
구성 요소의 초기 렌더링이 발생할 때 초기 값을 전달할 수 있습니다.이 값은useState(initialState)의 초기 매개 변수의 로고와 같습니다.
이 예에서는 구성 요소의 상태 변수를 업데이트하려면 setState를 사용합니다.이것은 알림의 새로운 값을 수신합니다. 즉시 업데이트하는 것이 아니라, 이 값을 줄을 서서, 이 변수에 최신 값을 전달합니다. 이 과정은react by immutability에서 잘 알려져 있습니다.
또 다른 방법은 몇 단락의 코드에서 업데이트 상태를 리셋해서 호출할 수 있는 함수를 찾을 수 있다는 것이다. 앞의 예와 같이 이렇게 재구성할 수 있다.

setState(prevState => nextState);

이렇게 하면 이전 상태에 기초한 새로운 상태가 되돌아온다.불변성 때문에 이것은 일부 응용 프로그램에서 광범위하게 사용된다. 예를 들어 우리는 화면 애니메이션의 상태 변경을 비교하기를 바란다.

const [name, setName] = useState<string>('John Doe');

TypeScript를 사용할 때 위 예제 useState<string>('value')의 상태 유형을 추정했습니다.그러나 특히, 주요 유형(예를 들어 문자열, 숫자, 볼 값)에 대해 유형을 현저하게 정의할 필요가 없습니다. typescript 해석기가 동적으로 정의할 수 있기 때문에 더 깨끗한 코드를 보존하고 서로 다른 데이터 유형을 알릴 때 오류를 피할 수 있습니다.
다음은useState에서 type과 TypeScript를 사용하는 것에 대한 더 자세한 예입니다.

import React, { useState } from 'react'

type ProductProps = {
  id: number
  name: string
  price: number
}

export default function Product() {
  const [ product, setProduct ] = useState<ProductProps[]>([
    {
      id: 1,
      name: 'Samsung Galaxy S20',
      price: 1999
    },
    {
      id: 2,
      name: 'Headset Misoftsot LX-300',
      price: 79
    },
    {
      id: 3,
      name: 'Mouse Gamer Corsair',
      price: 449
    }
  ])

  return (
    <div>
      <ul>
        { 
          product.map(item => (
            <li key={item.id}>{item.name} - {item.price}</li>
          ))
        }
      </ul>
    </div>
  )
}

위쪽은 매우 간단해서useState에서 일련의 제품을 전달하는 방법을 보여 준다.이렇게 하면 테스트 그룹의 사용 (use State에서 허용하는 다른 종류) 을 제외하고, typescript를 통해 계속 입력하는 방법을 검증하고, 코드에서 목록을 어떻게 실행해서 페이지에서 볼 수 있는지 추정할 수 있습니다.

useState의 기본 기술 사용

As good practice, always try to call the useState Hooks at the beginning of the component. Even if you position it in different places, React will try to organize so that your code works, however, you will present several warnings in your devtools.

Avoid creating Usestate within loops, conditional or some nested function, this can cause various errors in the rendering of your component, damaging your project.

바로 이 오프닝에서 당신은 React와 React Hooks에서 지식을 좀 깊이 있게 할 수 있습니다.React 기능에 대한 지식과 학습을 탐색합니다. 이 기능은 응용 프로그램의 다양한 작업에 도움을 줄 수 있습니다.연결에 대한 모든 정보는 Official Documentation 또는 Detailed Reference of Usestate에서 확인할 수 있습니다.
만약 네가 이 글을 좋아한다면 반드시 공유하고 평론해야 한다.더 많은 것을 알고 싶고, 생각을 바꾸고 싶다면, 이 주제에 대한 의견을 평론에 남기고, 곧 발표될 글에 대한 조언까지 할 수 있다.
www.fsenaweb.me 웹 사이트를 방문하여 제 업무를 즐기고 이해하십시오.그것은 나의 투자 그룹, 나의 소셜네트워크서비스 (GitHub, 너는 그 중에서 예시 응용 프로그램을 연습할 수 있다) 와 연락처 링크가 있다.
이렇게, 다음까지!저는 매튜스 리세리라고 합니다. 그의 관심에 감사 드립니다!