리액트 훅

• 컴포넌트의 생명주기에 맞춰 로직을 실행할수 있게됨.

useState

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
    
type Dispatch<A> = (value: A) => void;
type SetStateAction<S> = S | ((prevState: S) => S);

• 튜플 을 반환하고 첫번째에는 제너릭, 두 번째 요소는 상태를 업데이트할 수 있는 Dispatch 타입의 함수
• Dispatch 함수의 제네릭으로 지정한 SetStateAction에는 useState로 관리할 상태 타입인 S 또는 이전 상태 값을 받아 새로운 상태를 반환하는 함수인 (prevState:S)⇒S

import React from "react";

const MemberList = () => {
  const [memberList, setMemberList] = useState([
    {
      name: "kim",
      age: 10,
    },
    {
      name: "park",
      age: 20,
    },
  ]);
};

// addMember 함수를 호출하면 sumAge는 NaN이 된다.
const sumAge = memberList.reduce((sum, member) => sum + member.age, 0);
const addMember = () => {
  setMemberList([
    ...memberList,
    {
      name: "lee",
      age: 11,
    },
  ]);
};

import React from "react";

interface Member {
  name: string;
  age: number;
}

const MemberList = () => {
  const [memberList, setMemberList] = useState<Member[]>([]);
};

const sumAge = memberList.reduce((sum, member) => sum + member.age, 0);
const addMember = () => {
  //Error: Type Member | {name:string; agee:number;}
  //is not assignable to type 'Member' 
  setMemberList([
    ...memberList,
    {
      name: "lee",
      agee: 11,
    },
  ]);
};

• useState에 타입을 지정하여 방지

useEffect와 useLayoutEffect

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

• useEffect

function useEffect(effect:EffectCallback, deps?:DependencyList):void;

type DependencyList = ReadonlyArray<any>;
type EffectCallback = () => void | Destructor;

• 첫 번째 인자이자 effect의 타입인 EffectCallback은 Destructor를 반환하거나 아무것도 반환하지 않는 함수
• Destructor는 컴포넌트 마운트 해제될 때 실행하는 cleanup 함수
  • deps가 빈 배열이면 useEffect의 콜백 함수는 컴포넌트가 처음 렌더링 될 때만 실행되며, Destructor는 컴포넌트가 마운트 해제될때 실행
  • deps 배열이 존재한다면, 배열의 값이 변경될때마다 Destructor 실행
• Promise 타입은 반환하지 않으므로 useEffect의 콜백 함수에는 비동기 함수가 들어갈 수 없다