React Hooks에 대한 간략한 논의
후크: useState(), useEffect(), useContext(), useRef(), useReducer(), useCallback(), useMemo().
useState(): 데이터 또는 속성인 상태를 추가하고 추적합니다.
처음에는 다음과 같이 import해야 합니다.
import { useState } from "react";
그런 다음 useState()를 호출하여 상태를 초기화합니다. 예를 들어 로드를 추적하려면 다음과 같이 작성할 수 있습니다.
const [loading, setLoading] = useState("");
여기서 loading은 현재 상태이고, setLoading은 상태 값을 설정/업데이트하는 함수입니다.
useEffect(): 구성 요소에서 데이터 가져오기, dom 업데이트, 타이머 등과 같은 부작용을 수행할 수 있습니다. 2개의 인수가 있습니다. 첫 번째 인수는 기능이고 두 번째 인수는 종속성입니다. 두 번째 인수는 선택 사항입니다. useEffect()는 모든 렌더링에서 실행됩니다. 그러나 의존성에 따라 렌더링을 제어할 수 있습니다. 대부분의 경우 두 번째 매개변수는 빈 배열입니다. 어레이 내부에 추가 종속성을 추가할 수 있습니다.
구문: 3가지 조건으로 나눌 수 있습니다.
useEffect(() => {
//Runs only on the first render
}, []);
useEffect(() => {
//Runs on every render
});
useEffect(() => {
//Runs on the first render
//And any time any dependency value changes
}, [prop, state]);
useContext(): 반응 컨텍스트를 사용하여 상태를 전역적으로 관리할 수 있습니다. 중첩된 구성 요소 간에 상태를 쉽게 공유하는 데 사용할 수 있습니다. 그것이 없으면 우리는 중첩된 구성 요소 사이에 소품을 전달하기 위해 소품 드릴의 개념을 따라야 합니다. 그러나 소규모 또는 중간 규모의 프로젝트에는 더 많은 복잡성이 추가됩니다.
컴포넌트에 이것을 추가하는 방법:
1) react에서 import하고 초기화 합니다.
import { useState, createContext } from "react";
const UserContext = createContext();
2) 컨텍스트 제공자에서 자식 구성 요소 래핑.
<UserContext.Provider value={}>
…….
</UserContext.Provider>
3) 후크를 사용합니다.
useRef(): 렌더 간에 값을 유지할 수 있습니다. 이를 사용하여 dom 요소에 직접 액세스하고 변경 가능한 값을 저장할 수 있습니다. 이를 사용하여 애플리케이션이 렌더링되는 횟수를 알 수 있습니다. 현재라는 객체인 하나의 항목만 반환합니다.
useReducer(): useState()와 유사합니다. 커스텀 상태 로직이 적용됩니다. 그것은 2개의 인자를 받아들입니다: 감속기, 초기 상태.
useCallback(): 기억된 콜백 함수를 반환합니다. 종속성이 업데이트될 때만 실행됩니다. 구성 요소의 재렌더링을 방지합니다.
useMemo(): useCallback()과 동일하지만 기억된 값을 반환합니다.
Reference
이 문제에 관하여(React Hooks에 대한 간략한 논의), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/chayti/react-hooks-17ge텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)