🪝훅

클래스 컴포넌트는 상태 로직을 재사용하기 어렵다.

1. 리액트 훅

훅이 생기기 전에는 디버깅을 수행하려면 생명주기의 함수를 모두 비교했어야 했다.
훅이 도입되면서 함수 컴포넌트에서도 컴포넌트의 생명주기에 맞춰 로직을 실행할 수 있게 되었다.

useState

튜플의 첫번째 요소 : 제네릭으로 지정한 S 타입
튜플의 두번째 요소 : 상태를 업데이트 할 수 있는 Dispatch 타입의 함수
상태를 관리하기 위한 훅
```
import { useState } from "react";

const MemberList = () => {
    const [memberList, setMemberList] = useState([
        {
            name: "KingBaedal",
            age: 10,
        },
        {
            name: "MayBaedal",
            age: 9,
        },
    ]);
    const sumAge = memberList.reduce((sum, member) => sum + member.age, 0);

    const addMember = () => {
        setMemberList([
            ...memberList,
            {
                name: "DokgoBaedal",
                age: 11,
            },
        ]);
    }   ;
};
```
```
interface Member {
    name: string;
    age: number;
}
```
- memberList에 Member상태를 부여해줌으로써 해결할 수 있다.
의존성 배열을 사용하는 훅
1. useEffect ( EffectCallback, deps )
  - 렌더링 이후에 리액트 함수 컴포넌트에 어떤 일을 수행해야 하는지 알려줌
  - 첫번째 인자는 Promise타입을 반환하지 않기 때문에 비동기 함수가 들어갈 수 없다.
  - 경쟁 상태를 막기위함
  - 두번째 인자인 deps는 effect가 수행되기 위한 조건을 나열한다.
    - deps 배열의 원소가 변경되면 실행된다는 식으로 사용
  - useEffect는 deps의 변경을 얕은 비교로만 판단하기에 부모에서 받은 인자를 deps로 작성한 경우 처럼 객체의 참조 값이 변경되면 콜백함수를 실행한다
  - 의도치 않는 재랜더링을 반복할 수 있다.
```
const [name, setName] = useState("");

useEffect(() => {
    setName("배달이")
},[]);

return (
    <div>
        {`안녕하세요, ${name}님!`}
    </div>
);

//컴포넌트가 렌더링 된 후, name이 빈칸으로 렌더링
//setName이 완료 될 때 까지 빈칸 유지
```
2. useLayoutEffect
  - 정의는 useEffect와 동일하며 하는 역할의 차이만 있다.
  - useLayoutEffect를 사용하면 화면에 해당 컴포넌트가 그려지기 전에 콜백함수를 실행하기 때문에 첫 번째 렌더링 때 빈 이름이 뜨는 경우를 방지할 수 있다.
3. useMemo, useCallback
  - 이전에 생성된 값 또는 함수를 기억하며, 동일한 값과 함수를 반복해서 생성하지 않도록 한다.
  - 어떤 값을 계산하는 데 오랜 시간이 걸릴 때나 렌더링이 자주 발생하는 form에서 사용
```
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;
```
    - 왜 제네릭을 지원할까?
      - 함수를 저장하기 위해서
      - 두 훅은 deps 배열을 갖고 있으며 해당 의존성이 변경되면 값을 다시 계산하게 된다.
      - deps 배열이 변경되지 않았는데도 다시 계산되지 않도록 주의
4. useRef
  - useRef의 초기 설정값에 null이 들어가는 이유
  - useRef는 MutableRefObject나 RefObject를 반환
  - 전자는 값을 변경 가능 ( null 포함 )
  - 자식 컴포넌트에 Ref전달
    - props로 전달하면 오류
    - forwardRef로 전달
      - ForwardRefRenderFunction
  - useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트의 리렌더링이 발생하지 않는다.
  - 훅의 규칙
  - 최상위 레벨에서 호출할 것
  - 컴포넌트나 커스텀 훅 등의 리액트 컴포넌트 내에서만 호출될 것

ISSUE

리액트에서 경쟁 상태로 인해 일어나는 사이드 이펙트가 무엇일까?

JNU-econovation / hotsix-study

[03/13] 훅 #95

🪝훅

1. 리액트 훅

useState

의존성 배열을 사용하는 훅

ISSUE