Hooks?

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

Built-in Hooks의 핵심적인 역할을 하고 있는 2가지 useState, useEffect에 대해서 알아보겠습니다.

React에는 Class형 컴포넌트와 함수형 컴포넌트가 있습니다.

Class형 컴포넌트에서 state와 props에 대한 이야기는 이전 글을 찾아주세요 Class형 props
Class형 컴포넌트로 UI를 만들다보면 this 때문에 버그가 발생할 때가 있습니다. 원래, React의 낮은 버전에서는 함수형 컴포넌트에서 state를 사용할 수 없었는데 Hooks의 useState와 useEffect를 사용하면서 가능해졌습니다.
어떻게 state와 lifecycle을 구현했을까요? 답은. 클로저입니다.
클로저 참조 MDN

Hook의 2가지 규칙에 대해서 알아보겠습니다.
1. 최상위에서만 Hook을 호출해야 합니다. 그리고 반복문과 조건문 안에서는 사용 불가능합니다.
2. React 함수형 컴포넌트 내에서만 Hook을 호출해야 합니다.

Hook의 사용 예시를 살펴보겠습니다.
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>

클로저: 자신이 생성될 시점의 환경을 기억하는 함수.

useEffect(() => {
return () => console.log("컴디마");
}, [])

useEffect(() => {
return () => console.log("컴디업");
}, [state])

useEffect(() => {
if(!isMounted) {
console.log("CDM")
setIstMounted(true)

custom hook 만들어서 사용할 수도 있는데요. 다음에 알아보도록 하겠습니다.