React Hook???

훅이란 뭐냐? 갈고리다!! 말 그대로 훅을 이용해 component의 인생 중간중간에 참견을 할 수 있다
컴포넌트 등장하기전에 뭐해줘~
컴포넌트 사라지기전에 이거해줘~
업데이트되고 이거해줘~~

class형에서는 LifeCycle이었지만, React에서는 LifeCycle Hook라고한다.

이걸 왜 사용하냐????

1. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.
   가끔 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은데 이를 해결하기 위한 전통적 방법은 higher-order components와 render props가 있다.
   각 컴포넌트의 state는 독립적이다. hook은 state그 자체가 아니라 상태 관련 로직을 재사용하는 방법이다.

2. Class은 사람과 기계를 혼동시킨다?

Hook 사용 규칙

1.최상위에서만 Hook을 호출해야 한다. 또한, 반복문, 조건문, 중첩된 함수 내에서 hook 사용 금지!

import React, { useState } from "react"

function Hooks(props) {
	if (!props.isExist) {
		const [state, setState] = useState(); // Error!
	}
	const [state2, setState2] = useState(); // Error!
}

// react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.

2. 함수 컴포넌트 내에서만 Hook를 호출해야한다.

훅을 사용한다고 이미 작성된 코드에 필요한 변화사항은 없다. 선택적으로 사용해도되고, 100% 이전 버전과 호환이 되기때문이다.

State Hook

1. useState

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

상태 유지값과 그 값을 갱신하는 함수를 반환한다. 최초로 렌더링을 하는 동안, 변화된 state는 첫 번쨰 전달된 인자의 값과 같다.
setState함수는 state를 갱신할 때 사용한다.

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

Effect Hook

2. useEffect

useEffect(function);

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

useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행되게 된다.

How to use useEffect!

useEffect(() => {
	console.log("componentDidUpdate")
})

useEffect(() => {
	console.log("componentDidMount")
	return () => console.log("componentWillUnmount")
}, [])

useEffect(() => {
	console.log("componentDidMount")
	console.log("componentDidUpdate") // + shouldComponentUpdate
	return () => console.log("???")
}, [state])

// WRONG!!
useEffect(() => {
	console.log("CDM 쓰고 싶어요")
}, [])

useEffect(() => {
	console.log("CDU 쓰고 싶어요")
}, [state])