Hook이란?

Hook은 함수 컨포넌트에서 리액트 state, 생명주기 기능을 연동 할 수 있게 해주는 함수이다.(class 안에서는 작동 안함)

함수형 컨포넌트는 state를 관리하는 기능에 없다.
-인풋을 받고 아웃풋으로 끝내버리기 때문

hook쓰는 이유

• state관련된 로직을 재사용하기 어렵다.
• 복잡한 컴포넌트들은 이해하기 어렵다.
• class는 사람과 기계를 혼동시킴

Class의 단점

class형은 가장 최신의 state만 보고 있기 때문에 만약 팔로우 버튼을 누르고 3초 뒤 완료 메세지를 받는다면 1번을 누르고 3번에 가 있으면 3번이 팔로우를 누른 것으로 된다.

사용규칙!!!

1. 최상위에서만 hook을 호출해야된다
2. 반복문, 조건문, 중첩된 함수내 실행시키면 안됨.
3. 리액트의 함수 컴포넌트 내에서만 hook 호출

---

state 훅

1.useState

[state,setstate]는 배열 구조 분해이다.
배열은 순서기준으로 구분한다.
첫번째는 state의 값
두번쨰는 setstate의 함수가 두번째 인자로 감
setstate()호출하면서 새로운 state가 될 값 넣어주기

먼저 useState()를 하려면 맨 위에 import React, {useState} from "react"로 한 후 작업 ㄱ

useState() ()안에는 초기값을 쓴다.

2.Effeck Hook

컴디마, 컴디업, 컴윌언마 등 하나의 API로 통합한 것
useEffect(() =>{}, [count])
의존성 배열(배열안에 담긴 값들은 추적, 그때마다 업데이트)

useEffect(() ⇒ {console.log("after render")}); 
// 계속 setState가 되므로 무한 렌더가 된다.

모든 렌더링이 완료된 후에 매번 useEffect가 실행된다.

그러면 계속 무한 렌더가 되므로 [] 빈 배열을 넣어주면 다음 effect가 없기 때문에 무한렌더를 멈출 수 있다.

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

// WRONG!!
useEffect(() => {
	fetch(`/users/${id}`)
}, [])

//Good!!
useEffect(() => {
	fetch(`/users/${id}`)
}, [id])
// 배열안의 값을 추적할 수 있게 넣어준다.

3. 함수형에서 props 받기

function Monsters(props) {}
//매개변수 안에서 구조분해 할당이 가능하다.
function Monster({name, age, id}){}```