전에 사용 했던 Class형 컨포넌트의 문제점

• state, 라이프 사이클 때문에 사용
• 마치 생명체처럼 클래스로 부터 한번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 있음
• 반면 함수는 한번 호출되고 메모리 상에서 사라짐 ⇒ state, 라이프 사이클 불가능
• **this.state.foo가 참조하는 값은 항상 최신 ⇒ 결과를 보장하기 힘듬(버그 발생)**

Hook

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수이다.

• Hook은 class 안에서는 동작하지 않는다.
• 대신 class 없이도 React를 사용할 수 있게 해주는 것 (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장 X.
  대신 새로 작성하는 컴포넌트부터는 Hook을 이용하면 된다.)
• React는 useState 같은 내장 Hook을 몇 가지 제공한다..
• 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것(custom hook)도 가능

Hook의 규칙

규칙 1: 최상위(at the top level)에서만 Hook을 호출해야 합니다. 그리고 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
규칙 2 : React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)

State Hook

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

상태 유지 값과 그 값을 갱신하는 함수를 반환한다. 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같다.

setState 함수는 state를 갱신할 때 사용한다.
새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록한다.

setState(newState + 1); // setState와 동일하게 비동기 업데이트
setState(prev => prev + 1);

다음 리렌더링 시에 useState를 통해 반환받은 첫 번째 값은 항상 갱신된 최신 state가 된다.

Effect Hook

useEffect(function);

useEffect(() => {}, [count]) // 의존성 배열 (배열 안에 담긴 값들을 추적, 그때 마다 업데이트)

명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다.

(setState를 통해서만 state를 업데이트 해왔듯) 대신에 useEffect를 사용! useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행된다.

기본적으로 동작은 모든 렌더링이 완료된 후에 수행됩니다만, 어떤 값이 변경되었을 때만 실행되게 할 수도 있다.