useState

컴포넌트 함수 내부의 지역 변수(예: let index = 0) 선언 시

컴포넌트 함수가 리렌더링될 때 매번 새로 선언되므로 index 값이 유지되지 않는다.

또 setState를 활용하지 않은 변경의 경우(= 지역 변수를 재할당으로 직접 변경) 리액트가 화면을 리렌더링해야 한다는 사실을 인지하지 못한다.

리액트의 컴포넌트를 새롭게 업데이트하려면 2가지 작업 필요

• 이전 렌더링과 현재 렌더링 사이에 데이터 유지하기
• 새로운 데이터를 가지고 컴포넌트를 리렌더링해야 한다는 사실을 리액트에게 알림

=> 이 2가지를 useState로 해결할 수 있다.

• 렌더링 간에 데이터를 유지하는 state 변수
• state를 변경하고 이 사항을 리액트에게 알리는 setState 함수

리액트 Hook

• useState를 비롯하여 'use~'로 시작하는 다른 함수들
• hook은 리액트가 렌더링 중일 때만 사용할 수 있는 특별한 함수

Pitfall

• 'use~'로 시작하는 함수(hook)는
  컴포넌트 최상위 레벨(최상위 컴포넌트가 아니라 컴포넌트 내에서 제일 상위) 또는 커스텀 훅에서만 호출 가능
  • 컴포넌트 함수 내의 조건문, 반복문, 또는 다른 중첩된 함수 내에서는 hook 호출 불가
• 이유: hook은 호출 순서에 의존하기 때문에 => 위의 규칙을 지키면 항상 같은 순서(예측 가능한 순서)로 호출됨