3 리액트 훅 깊게 살펴보기

Hooks?

클래스 컴포넌트에서 사용하던 리엑트의 다향한 기능을
함수형 컴포넌트로 Hooking해와서 사용할 수 있는 기능.

✨3-1 리엑트의 모든 훅 파헤치기

🔻useState

함수형 컴포넌트 내부에서 상태를 정의하고, 관리할 수 있게 해줌.

🔻useEffect

애플리케이션 내 컴포넌트의 여러 값들을 활동을 감지해 동기적으로 사이드이펙트를 만드는 함수.

• --!-- 생명주기 메서드를 대체하기 위해 만들어진 훅이 아니다.

🔻useMemo

비용이 큰 연산에 대한 결과값을 저장해 두고, 이 저장된 값을 반환하는 훅.

🔻useCallback

특정 함수를 재사용하는 훅.

🔻useRef

값이 변하더라도 렌더링을 발생시키지 않는 변수 훅.

🔻useContext

명시적인 props 전달 없이도 선언한 하위 컴포넌트 모두에서 자유롭게 원하는 값을 사용할 수 있는 훅.

🔻useReducer

useState와 비슷한 형태를 띠지만 좀 더 복잡한 상태값을 미리 정의해 놓은 시나리오에 따라 관리할 수 있는 훅.

• 반환값은 길이가 2인 배열.
  2개에서 3개의 인수를 필요로 함.

사용 목적

복잡한 형태의 state를 사전에 정의된 dispatcher 로만 수정할 수 있게 만들어 줌.
미리 제한한 시나리오에서 state 변경을 빠르게 확인할 수 있게끔 하는 것.

🔻useImperativeHandle

부모에게서 넘겨받은 ref를 원하는 대로 수정할 수 있는 훅.

🔻useLayoutEffect

dom 은 계산되었지만 이것이 화면에 반영되기 전에 하고싶은 작업이 있을 때 실행하는 훅.
자주 사용되지는 않음.

🔻useDebugValue

디버깅 하고 싶은 정보를 이 훅에다 사용하면 리액트 개발자 도구에서 볼 수 있다.
리액트 애플리케이션을 개발하는 과정에서 사용되는 훅.

🔻훅의 규칙

rules-of-hooks 라고 함. 이와 관련된 ESLint 규칙도 존재함.

✨3-2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?

🔻사용자 정의 훅

사로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 훅.
리액트에서만 사용할 수 있는 방식.
기존의 훅을 기반으로 개발자가 필요한 훅을 만드는 기법.

🔻고차 컴포넌트

컴포넌트 자체의 로직을 재사용하기 위한 방법.
사용자 정의 훅은 리액트 훅을 기반으로 하므로 리액트에서만 사용할 수 있는 기술이지만,
고차 컴포넌트는 고차 함수릐 일종으로, 자바스크립트의 일급 객체, 함수의 특징을 이용하므로 굳이 리엑트가 아니더라도
자바스크립트의 환경에서 널리 쓰임.

🔻사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야할까?

🔻정리