소수의 후크

후크는 이전 버전과 호환되며 React16.8에 도입되어 클래스 구성 요소를 작성하지 않고 상태 및 기타 반응 기능을 사용합니다.

새로운 개념을 도입하지 않고 기존 개념을 구현하는 단순화되고 이해하기 쉬운 코드를 작성하는 데 도움이 됩니다.

Conventionally functional components are used for representational purposes, referred to as dumb or stateless components, but with the introduction of Hooks, we can implement all class-based components concepts with functional components.

🤔 이전 요구 사항에 대해 기능적 구성 요소를 구현했으며 이제는 클래스 구성 요소로 변환하여 수행했다면 구성 요소에서 상태를 구현해야 하는 상황에 직면한 적이 있습니다.

😇 이제 기능적 구성 요소에서 상태를 구현하기 위해 후크를 사용하기만 하면 됩니다.

편리하고 코딩 방법을 개선할 수 있는 Handful of Hooks가 있으며, 이에 대해서는 잠시 후에 소개하겠습니다.

왜 후크인가?

부작용이 있는 복잡한 구성 요소:
구성 요소는 이해하기 쉽고 처음부터 구축
그러나 증가하는 상태 저장 논리 및 부작용
데이터를 가져오면 이해하고 유지하기가 더 어려워집니다.
후크는 논리를 분리하여 쉽게 만듭니다.

클래스는 많은 것을 혼동합니다.
클래스 기반 구성 요소를 구현하는 동안
이를 사용하는 방법, 범위, 다양한 수명 주기 방법,
그리고 그들의 사용 사례. 함수를 참조할 때마다
클래스 구성 요소를 this(class
context)를 생성자의 함수에 추가하거나 다음을 사용하여 호출합니다.this 문맥.

깨끗하고 깔끔한 코드:
Hooks를 통해 모든 클래스 기반 수명 주기 및 상태 관리
기능적 구성 요소로 구현될 수 있으며 쉽게 제거할 수 있습니다.
논리를 Hooks와 연결합니다. 우리는 같은 것을 구현할 수 있습니다
더 적은 라인에 기능적 구성 요소가 있는 로직.

후크

시작할 때 살펴봐야 할 기본 후크는 useState 및 useEffect입니다.

useState를 사용하면 기능적 구성 요소에서 상태 관리를 구현할 수 있으며 구문은

useState는 두 개의 인수인 상태 변수와 상태 설정자를 반환합니다.

useState를 사용하면 여러 상태 변수를 사용할 수 있습니다.

Recommended way of setting state is:
setState(preState => {
   //use preState to create new state
   return newState
})

useEffect는 ComponentDidMount 및 ComponentDidUpdate와 같은 클래스 기반 수명 주기 메서드를 구현하는 데 사용할 수 있는 또 다른 공통 후크입니다. 또한 각 useEffect 호출 전에 실행되는 정리 콜백이 있습니다.

useEffect accept args array which is trigger useEffect on change of args in array, if given empty array only triggers at mounting

사용 참조:

useRef는 Dom 요소를 참조하는 데 사용할 수 있으며 정적 콘텐츠를 만드는 데 사용할 수 있습니다.

const ref = useRef(intialValue) and refered by ref.current

useMemo 및 useCallback:

useMemo 및 useCallback은 args 배열도 허용하는 메모화 목적 후크이며 배열 변경의 모든 args에서 트리거됩니다. 주로 비용이 많이 드는 계산을 계산하는 데 사용되며 다시 렌더링할 때는 수행하지 않습니다.

useContext 및 useReducer:

context Api는 useContext를 사용하여 구현할 수 있으며, useContext는 부모로부터 오는 context 값을 소비하는 데 도움이 됩니다(context는 React.createContext를 사용하여 생성됨).

useReducer는 복잡한 상태 관리를 유지하는 데 도움이 되며 Redux와 동일한 방식으로 작동합니다. 필요한 상태 변경을 수행하기 위해 리듀서 및 디스패치 작업을 정의합니다.

Good use-case is using useContext and useReducer together, to create gobal or localised state for component tree.

React-router-dom 후크:

useParams: URL에서 매개변수를 추출합니다.

useHistory: 모든 수준의 구성 요소에서 기록 API를 사용합니다.

useLocation: 경로 이름, 일치 및 위치 정보를 제공합니다.

React-Redux 후크:

react-redux는 인생을 쉽게 만드는 후크를 제공합니다. react-redux에서 제공하는 후크를 사용하여 redux 로직을 구현하는 것은 이해하고 구현하기 쉽습니다.

useDispatcher: 상태를 수정하기 위해 작업을 디스패치하는 디스패처를 반환합니다.

useSelector: 전역 저장소에서 저장소 조각을 가져오거나 선택합니다.

useStore: 모든 매장 조각을 포함하는 전체 매장을 반환합니다.

결론:

주문형으로 사용할 수 있는 다른 후크는 거의 없지만 편리하고 일반적으로 사용할 수 있는 후크입니다. 각 후크에 대한 설명은 방대할 수 있으며 한 페이지에 완료할 수 없으므로 위의 후크를 개별적으로 살펴보세요✌️