Hooks

Hook?

Hook 규칙

• 컴포넌트의 최상위 레벨에서만 호출해야합니다.

• 반복문이나 조건문 혹은 중첩 함수 내에서 Hook을 호출하면 안됩니다. -> 리액트 훅은 호출 순서에 의존하기 때문에 조건문이나 반복문 내부에서 실행할 경우 해당 부분을 건너뛰는 일이 발생하는 등의 버그가 발생할 수 있습니다.

• 리액트 함수 내부에서만 호출해야합니다.

useState

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React는 어떤 state를 반환할지 어떻게 알 수 있을까요?

useState 자세히 뜯어보기

1. useState같은 Hook들은 react 모듈 안에 선언된 함수입니다.

2. useState는 실행될 때마다 dispatcher를 선언하고 useState 메서드를 실행해서 그 값을 반환합니다.

3. 선언한 dispatcher코드를 살펴보면 전역 변수 ReactCurrentDispatcher로부터 dispatcher를 가져옴을 확인할 수 있습니다.

if(_value === undefined)
	_value = initialValue;

1. 처음 컴포넌트 함수가 실행되어 useState를 실행합니다. 👉 _value가 undefined이니 initialValue를 할당합니다.

2. 다시 컴포넌트 함수가 실행되면 useState가 실행됩니다. 👉 이 때에는_value가 undefined가 아닙니다.

3. useState가 반환한 값을 변수에 할당합니다.

4. setState함수는 자신과 함께 반환된 변수를 변경시키는 것이 아니라 다음 useState가 반환할 react 모듈의 _value를 변경시키고 컴포넌트를 리렌더링 시키는(트리거) 역할을 합니다.

다음 렌더링 전에 동일한 state 변수를 여러 번 업데이트하기

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(n => n + 1);
        setNumber(n => n + 1);
        setNumber(n => n + 1);
      }}>+3</button>
    </>
  )
}

updator function 사용하기

1. React는 이벤트 핸들러의 다른 코드가 모두 실행된 후에 이 함수가 처리되도록 큐에 넣습니다.

2. 다음 렌더링 중에 React는 큐를 순회하여 최종 업데이트된 state를 제공합니다.

setEnabled(e => !e);
setLastName(ln => ln.reverse());
setFriendCount(fc => fc * 2);