낚싯바늘은 무엇입니까?

이 강좌에서 우리는 갈고리가 무엇인지, 그리고 그것을 어떻게 사용해서 더 좋은 응답을 만드는지 배울 것이다.최근 이 시리즈에서 우리는 갈고리와 갈고리를 많이 보았다.다음은 React 갈고리에 대한 상세한 정보입니다.

갈고리가 뭐예요?
연결 고리는 확장 또는 연결 기능 구성 요소의 반응 상태와 생명주기 특성을 나타내는 기능이다.
이전에 이러한 기능은 클래스 기반 구성 요소에만 적용되었다.갈고리를 도입함으로써, 우리는 클래스 기반 구성 요소를 작성할 필요가 없다.

연결 배후의 동기를 끌어들이다
리액트 16.8(2018년 10월)에 연계가 도입됐다.페이스북이 왜 React 갈고리를 만들었는지, 그리고 어떤 문제를 해결했는지 살펴봅시다.

구성 요소 간에 상태 논리를 사용하기 어렵다. 초기에는 React 클래스 구성 요소만 로컬 상태 관리와 생명주기 방법에 사용되었다.기능 구성 요소는 상태나 라이프 사이클 방법이 필요 없는 경우에만 사용할 수 있습니다.이것은 상태나 생명주기 방법이 필요할 때(반대로) 구성 요소를 React 함수 구성 요소에서 React 클래스 구성 요소로 재구성해야 한다는 단점을 가져왔다.갈고리가 있으면 재구성할 필요가 없다.

복잡한 구성 요소를 이해하고 다시 사용하기 어렵다. 예를 들어 생명주기 방법(예를 들어componentDidMount,componentDidUdate,componentWillUnmount)을 사용하여 부작용(예를 들어 네트워크 요청 등)을 포함하는 구성 요소를 유지하고 관리하기 어렵다.상태 논리가 곳곳에 분산되어 있기 때문에 구성 요소를 더 작은 부분으로 분해하기도 어렵다.이 문제를 해결하기 위해서 갈고리는 관련 부분에 따라 하나의 구성 요소를 더 작은 함수로 나눌 수 있습니다.

류는 사람과 기계를 혼동한다. 자바스크립트의 류를 이해하는 것이 학습 반응의 주요 장애이다.OOP 배경이 아닌 사람(나 포함)에게는 더욱 어려워진다.React hooks는 학습 곡선의 매끄러움과 빠른 발전을 확보했다.

누가 갈고리를 배워야 합니까? 왜요?
페이스북은 React에서 클래스를 삭제할 계획이 없다.또한 이 갈고리들은 완전히 뒤로 호환되어 개념에 대한 이해를 대체하지 않습니다.

클래스 구성 요소를 이미 사용하고 있다면
클래스 구성 요소에 대해 잘 알고 있다면, 클래스 기반 구성 요소를 기능 구성 요소로 바꾸고 싶지 않을 수도 있고, 그럴 필요도 없습니다.그러나 React 문서에서도 연결을 배우고 연결을 사용하여 새 구성 요소를 작성하는 것을 권장합니다.갈고리로 생각하기 시작하는 데는 시간이 걸릴 수도 있지만, 일단 편안함을 느끼면 매우 쉽다.
만약 네가 이미 공부를 시작했다면, 너는 반응을 할 것이다
너 요즘 반응 시작하면그럼 좋겠다.JavaScript 클래스 (상속, this, 귀속, 슈퍼 등) 가 가져오는 모든 비용을 걱정할 필요가 없습니다.React 갈고리는 가장 간단한 쓰기 방식일 뿐만 아니라 React를 배우는 가장 간단한 방식이기도 하다.
그래서 경험이 풍부한 개발자든 초보자든 갈고리를 통해 일해야 한다.리얼리티 문서까지 연결이 리얼리티의 미래라고.
나는 네가 지금 우리가 왜 갈고리를 배워야 하는지, 그리고 그것이 해결하고 있는 문제를 대체적으로 이해해야 한다고 생각한다.설령 그렇지 않더라도 걱정하지 마라, 이것은 그렇게 중요하지 않다.중요한 것은 각종 갈고리를 배우고 파악하는 것이다.우리 좀 깊이 들어가자.

갈고리를 쓰는 규칙
갈고리는 일반적인 JavaScript 함수이지만 다음과 같은 규칙을 고려해야 합니다.

맨 위에서만 갈고리를 호출할 수 있습니다. 다른 순환, 조건 또는 삽입 함수 내부에서는 갈고리를 호출할 수 없습니다.함수 구성 요소 내부의 맨 위에서 그것들을 호출해야 합니다.

갈고리는 React 함수 구성 요소에서만 사용할 수 있습니다: 일반 함수에서 갈고리를 호출할 수 없습니다.그것들은 함수 구성 요소에서만 호출할 수 있고 다른 어느 곳에서도 호출할 수 없다.

기본 갈고리

State 갈고리-useState(): 함수 구성 요소에 상태 논리를 추가할 수 있습니다.

import React, { useState } from 'react'; 

function App() {
    const [state, setState] = useStaet(''); 
 /*All other code here*/
}

/////
// THIS IS JUST A SIMPLE EXAMPLE OF useState() hook

효과 연결-useffect(): 함수 구성 요소

에서 부작용(예를 들어 API 호출, 네트워크, 요청 등)을 실행합니다.

상하문 연결-useContext():redux를 사용하지 않은 상태에서 데이터를 하위 요소에 전달할 수 있습니다.

useReduce():useState의 대체품.복잡한 상태 논리에 사용됩니다.

useCallback(): 함수 구성 요소의 표현 행위 최적화

useMemo: 비싼 함수를 기억할 수 있도록 합니다. 렌더링할 때마다 호출하지 않도록 합니다

useRef(): 가변 변수를 만들 수 있습니다.DOM 노드/React 요소에 액세스하고 다시 렌더링을 트리거하지 않고 가변 변수를 공유할 수 있습니다.

😎 즐거운 반응 읽어주셔서 감사합니다.💻
새해 복 많이 받으세요.🎉🙌🥂.
2021년을 생산적인 해로 만들자.