[우아한 타입스크립트] 9장

📍 리액트 훅

useState

리액트 함수 컴포넌트에서 상태를 관리하기 위해 useState 훅을 활용할 수 있다.

function useState<S>(
initialstate： S ! (() => S)
)： [S, Dispatch<SetStateAction<S»];
type Dispatch<A> = (value： A) => void;
type SetStateAction<S> = S ! ((prevState： S) => S);

useState가 반환하는 튜플의 첫 번째 요소는 제네릭으로 지정한 S 타입이고 두 번째 요소는 상태를 업데이트할 수 있는 Dispatch 타입 함수

 

의존성 배열을 사용하는 훅

useEffect와 useLayoutEffect

렌더링 이후 리액트 함수 컴포넌트에 어떤 일을 수행해야 하는지 알려주기 위해 useEffect훅을 활용할 수 있다.

function useEffect(effect： EffectCaUback, deps?： DependencyList)： void;
type DependencyList = ReadonlyArray<any>;
type EffectCaUback = () => void | Destructor;

useEffect의 첫 번째 인자이자 effect의 타입인 EffectCallback은 Destructor를 반환하거나 아무것도 반환하지 않는 함수이다.

Promise 타입은 반환하지 않으므로 useEffect의 콜백 함수에는 비동기 함수가 들어갈 수 없다.

두 번째 인자인 deps는 옵셔널하게 제공되며 effect가 수행되기 위한 조건을 나열한다.

예를 들어 deps 배열의 원소가 변경되면 실행한다는 식으로 사용한다.

useEffect는 deps가 변경되었는지를 얕은 비교로만 판단하기 때문에, 실제 객체 값이 바뀌지 않았더라도 객체의 참조 값이 변경되면 콜백 함수가 실행된다.

얕은 비교
객체나 배열 같은 복합 데이터 타입의 값을 비교할 때 내부의 각 요소나 속성을 재귀적으로 비교하지 않고, 해당 값들의 참조나 기본 타입 값만을 비교하는 것을 말한다.

 

deps가 빈 배열이라면 useEffect의 콜백 함수는 컴포넌트가 처음 렌더링될 때만 실행되며, 이때의 Destructor（클린업 함수)는 컴포넌트가 마운트 해제될 때 실행된다. 

deps 배열이 존재한다면 배열의 값이 변경될 때마다 Destructor가 실행된다.

 

useLayoutEffect 훅 역시 useEffect와 역할 차이만 있다.

type DependencyList = ReadonlyArray<any>;
function useLayoutEffect(effect： EffectCaUback, deps?： DependencyList)： void;

useLayoutEffect를 사용하면 화면에 해당 컴포넌트가 그려지기 전에 콜백 함수를 실행하기 때문에 첫 번째 렌더링 때 빈 이름이 뜨는 경우를 방지할 수 있다.

 

useMemo와 useCallback

두 개 모두 이전에 생성된 값 또는 함수를 기억하며 동일한 값과 함수를 반복해서 생성하지 않도록 해주는 훅이다.

어떤 값을 계산하는 데 오랜 시간이 걸릴 때나 렌더링이 자주 발생하는 form에서 useMemo나 useCallback을 유용하게 사용할 수 있다.

type DependencyList = ReadonlyArray<any>;
function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;
function useCallback<T extends (...args: any[]) => any>(callback: T, deps:
DependencyList): T;

두 훅 모두 제네릭을 지원하기 위해 T 타입을 선언해 주며 useCallback은 함수를 저장하기 위해 제네릭의 기본 타입을 지정하고 있다.

두 훅은 deps 배열을 갖고 있으며 해당 의존성이 변경되면 값을 다시 계산하게 된다.

모든 값과 함수를 useMemo와 useCallback을 사용해 과도하게 메모이제이션하면 컴포넌트의 성능 향상이 보장되지 않을 수 있다.

 

useRef

<input /> 요소에 포커스 설정하거나 특정 컴포넌트의 위치로 스크롤 등 DOM을 직접 선택해야 하는 경우가 발생할 수 있다.

이때 리액트의 useRef 사용

useRef는 세 종류의 타입 정의를 가지고 있고 넣어주는 인자 타입에 따라 반환되는 타입이 달라진다.

리액트 컴포넌트에서 ref를 prop으로 전달하려면 forwardRef를 사용해야 한다.

interface Props {
name： string;
}
const Mylnput = forwardRef<HTMLInputElement, Props>((props, ref) => {
return (
<div>
<label>{props .name}</label>
<input ref = {ref} />
</div>
);
});

 

uselmperativeHandle

uselmperativeHandle은 ForwardRefRenderFunction과 함께 쓸 수 있는 훅이다.

이 훅을 사용하면 부모 컴포넌트에서 ref를 통해 자식 컴포넌트에서 정의한 커스터마이징된 메서드를 호출할 수 있게 된다.

이에 따라 자식 컴포넌트는 내부 상태나 로직을 관리하면서 부모 컴포넌트와의 결합도를 낮출 수 있다.

 

useRef의 여러 가지 특성

useRef는 자식 컴포넌트를 저장하는 변수로 활용할 수 있을 뿐만 아니라 다른 방식으로도 유용하게 사용할 수 있다.

- useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트 리렌더링이 발생하지 않는다. 

- 리액트 컴포넌트 상태는 상태 변경 함수를 호출하고 렌더링된 이후에 업데이트된 상태를 조회할 수 있다.

 

 

🔮 커스텀 훅

나만의 훅 만들기

커스텀 훅은 리액트 컴포넌트 내에서만 사용할 수 있는데 이름은 반드시 use로 시작해야 한다.

import { useState } from "react";
const useinput = (initialvalue) => {
const [value, setValue] = useState(initialvalue);
const onChange = (e) => {
setValue(e .target .value);
};
return { value, onChange };
};