useState

const [state, setState] = useState(initialState);

너무나 익숙한 우리들의 useState이다.

컴포넌트에 state를 추가할 수 있고, setState을 통해 state를 업데이트할 수 있다.

React에서 state는 readonly 이므로 state를 변경은 setState로만 가능하다.

리액트 코드 분석

// packages/react/src/ReactHooks.js
type BasicStateAction<S> = (S => S) | S;
type Dispatch<A> = A => void;

const ReactCurrentDispatcher = {
  current: (null: null | Dispatcher),
};

function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
	//__DEV__ 생략
  return ((dispatcher: any): Dispatcher);
}

export function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

첫번째 인자 initialState

• 순수 함수 or 모든 타입의 값
• (() => S) | S

리턴값 [state, setState]

• state의 타입은 제네릭 S로 설정 가능, 따로 설정안해도 initialState의 타입을 따라감
• setState 타입은 Dispatch<BasicStateAction<S>> , 즉 (S => S) | S => void

const [age, setAge] = useState(24);

setAge(25); // S
setName(() => 'Kang'); // () => S
setAge((prevAge) => prevAge + 1); // S => S