react 공식 문서 참조하기!!
https://ko.reactjs.org/docs/hooks-intro.html#gatsby-focus-wrapper
Hook
hook은 단지 함수일 뿐이다.
4가지의 built-in Hooks(useState, useEffect, useRef, useReducer)등이 있다.
- Hook은 class형 컴포넌트에서는 동작하지 않음.
그동안 state, Life cycle로 인해서 클래스 컴포넌트를 사용했다. 함수는 한번 호출되며 메모리 상에서 사라지므로 state, Life Cycle 불가능.
Hook 사용 규칙
최상위에서만 hook을 호출해야 함. 반복문, 조건문, 중첩된 함수 내에서 hook을 실행하지 말 것.
State Hook
useState
const [state, setState] = useState(initialState)state는 말하자면 클래스형 컴포넌트에서 this.state같은 초기값이라 볼 수 있다.
initialState안에 초기값을 세팅해주면 state가 그 초기값을 갖고 있는 것이고, setState() 괄호 안에 어떤 값을 넣어주면 그 값으로 바뀌는 것을 의미한다.
-
기존 setState와 마찬가지로 비동기 update
-
useState 실행 시 state, setState 한 쌍이 부여됨.
-
클로저 : 자신이 생성될 시점의 환경을 기억하는 함수
// 아주 간단한 버전의 useState
const useState = (init = undefined) => {
let value = init
const getter = () => value // 클로저
const setter = next => (value = next) // 클로저
return [getter, setter]
}
const [state, setState] = useState('클로저')
state() // 클로저
setState("어려워!") // 어려워
state() // 어려워이런식으로 사용된다.
Effect Hook
componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것
useEffect
useEffect(function);
useEffect(() => {}, [count]) // 의존성 배열 (배열 안에 담긴 값들을 추적, 그때 마다 업데이트)어떤 effect를 발생시키는 함수를 인자로 받는다.
기본적으로 동작은 모든 렌더링이 완료된 후에 수행.
