React Hook에 대하여(2)

React hook은 기본 Hook 3종류와 추가 Hook7종류가 존재한다.

 

기본 Hook

•useState: const [state, setState] = useState(initialState); / 상태 유지 값과 그 값을 갱신하는 함수를 반환 한다. 최초 렌더링 동안 반환된 state는 initialState의 값과 동일하다.

•useEffect: useEffect(didUpdate); / 명령형 또는 어떤 이펙트를 발생하는 함수를 인자로 받는다. 전달된 함수는 렌더링이 완료된 후에 수행되게 된다.

•useContext: const value = useContext(MyContext); / React.creatContext 객체에서 반환된 값을 받아 현재 값을 반환한다.

 

추가 Hook

•useReducer: const [state, dispatch] = useReducer(reducer, initialArg, init); / useState의 대체 함수이다. (state, action)=>newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환한다.

•useCallback: const memoizedCallback=useCallback(() => {}) / 메모이제이션된 콜백을 반환, 인라인 콜백과 그것의 의존성 값의 배열을 전달

•useMemo: const memoizedValue = useMemo(() => {}) / 메모이제이션된 값을 반환, 생성 함수와 그것의 의존성 값의 배열을 전달

•useRef: const refContainer = useRef(initialValue); / useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 해당 객체는 컴포넌트 전 생애주기를 통해 유지된다.

•useImperativeHandle: useImperativeHandel(ref, createHandel, [deps]); / ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화 한다. 명령형 코드는 피하고 forwardRef와 더불어 사용한다.

•useLayoutEffect: 해당 함수의 시그니처는 useEffect와 동일하긴 한데, 모든 DOM 변경 후에 동기적으로 발생한다. DOM에서 레이아웃을 읽고 동기적으로 리렌더링 하는 경우에 사용한다.

•useDebugValue: useDebugValue(value); / useDebugValue는 리액트 개발자도구에서 사용자 Hook 레이블을 표시하는데 사용할 수 있다.(디버깅용이다.)