반응 후크

React Hooks는 React.js를 만든 Dan Abramov가 React 16.8에 도입했습니다.

후크는 개발자가 일반 반응 기능 구성 요소에서 불가능한 특정 기능을 사용할 수 있도록 하는 일련의 기능입니다.

반응하는 일련의 미리 정의된 후크가 있지만 자체 후크를 만들 수도 있습니다.

useState

useEffect

useContext

useReducer

useCallback

유즈메모

useRef

명령 핸들 사용

useLayoutEffect

디버그 값 사용

또한 프로젝트에 대한 3개의 예제 사용자 정의 후크를 만들 것입니다.

후크에 대해 설명하고 후크만 사용하여 프로젝트로 이동합니다.

React.js 후크 규칙을 살펴보겠습니다.

상위 수준에서만 Hook을 호출합니다.
주기, 조건부 또는 중첩 함수에서 후크를 호출할 수 없음

React Functional Components 또는 사용자 정의 후크에서만 후크를 호출합니다.

탐색할 미리 정의된 후크 목록은 다음과 같습니다.

useState

useEffect

useEffect 후크는 데이터 요청, 구독 및 수동 구현에 사용됩니다. 이러한 현상을 "2차 효과"라고 ​​합니다.

React 클래스 구성 요소에 익숙하다면 useEffect 후크를 사용하여 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 수명 주기 메서드를 처리합니다.

또한 2차 효과에는 살균 작업이 필요한 경우와 그렇지 않은 경우의 2가지 유형이 있습니다.

위생 처리가 필요하지 않은 사람: 실행하고 잊어버릴 수 있는 후크, 예: 네트워크 요청, 수동 DOM 돌연변이, 등록

살균이 필요한 분 : 메모리 누수로 이어질 수 있는 효과를 살균합니다

효과는 모든 렌더링에서 실행되므로 useEffect 후크를 사용하여 일부 수명 주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)를 대체합니다.

효과를 살균하는 방법을 표시하기 위해 useEffect 내부에 함수 반환(clean, unmount)

우리는 일반적으로 상태 변수와 함께 useEffect를 사용합니다.

렌더링 최적화를 위한 효과 생략: 구성 요소가 업데이트될 때마다 효과를 실행하지 않으려면 후크의 두 번째 인수인 종속성 배열 사용을 고려해야 합니다.

const [count, setCount] = useState(0)

useEffect(()=>{
   setCount(count + 1)
},[count])

이 효과는 카운트 상태 변수 값이 변경된 경우에만 실행됩니다.

우리는 그것에 더 많은 가치를 추가할 수 있습니다

종속성 배열을 비워두면 한 번만 실행됩니다.