[03/13] 훅

[dxwwan]

🪝훅

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

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

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