Hooks는 무엇일까?

Hook은 state의 생명주기 기능(lifecycle) 을 연동 할수 있게 해주는 함수이다
React에는 4가지의 Built-in Hooks(useState, useEffect, useRef, useReducer) 등이 있다.

왜 사용 할까?

기존의 개발방식은 일반적으로 함수형 컴포넌트를 주로 사용하되 state이나 Life Cycle method를 사용해야 할 때에만 클래스형 컴포넌트를 사용하는 방식이었다
하지만 hooks의 등장으로 인해 함수형 컴포넌트에서도 state와 lifecycle을 사용할 수 있게 되었다.

Hook의 사용 규칙

규칙1. 최상위에서만 hook을 호출해야 한다. 그리고 반복문, 조건문, 중첩된 함수 내에서 실행할 수 없다.

import React, { useState } from "react"

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

규칙2. React 함수 컴포넌트 내에서만 hook을 호출해야 한다. 일반 js함수 내에서는 호출할 수 없다.

---

State Hook

useState

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

상태 유지값(state)와 그 값을 갱신하는 함수(setstate)를 반환한다.
최초로 렌더링을 하는 동안, 반환된 state는 첫 번째 인자(initialState)의 값과 같다. setState 함수는 state를 갱신할 때 사용한다ㅏ. 새 state 값을 받아 컴포넌트 리랜더링을 큐에 등록한다

클래스형 컴포넌트

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
			ismodalActive: false,
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

class형은 state를 선언하고 this.state() method를 사용하여 state로 지정해준 count에 this.state.count+1을 작성해주어야했다

함수 컴포넌트

function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0);
	const [isModalActive, setIsModalActive] = useState(false);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
			<button onClick={() => setIsModalActive(!isModalActive)}>modal btn</button>
    </div>
  );
}

함수컴포넌트는 코드부터 간결해지며 state와 setstate를 한 줄로 구현하였으며
onClick이 실행 되었을때도 this를 사용하지 않고 setstate를 사용하여 state 초기값에 바로 +1을 사용해주었다.

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

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()

위 로직은 useState를 자세하게 풀어서 쓴 로직이다!
getter함수는 state, setter함수는 setstate 라고 생각하고 보면 보기 편하다.

Effect Hook

Effect Hook은 Lifecycle을 하나의 API로 통합된 것이다.

useEffect(function);

useEffect(() => {}, [count]) //의존성 배열 

의존성 배열이 빈 배열 [] 이라면 cpm과 같아 render후 fetch, 처음 딱 한번만 실행되고 끝이 나지만,

useEffect(() => {
  return () => }, [state])
 

배열에 인자가 있다면 cdm가 되고, state가 변경될 때 마다 useEffect가 실행된다(cdu).