Hooks?

함수 컴포넌트에서 react state와 생명주기 기능을 연동할 수 있게 해 주는 함수.

• 원래 함수 컴포넌트에서 state와 생명주기를 가지고 있지 않다.
• 원래 state와 생명주기는 클래스 컴포넌트만 사용할 수 있는데, 함수 컴포넌트에서 useState랑 useEffect를(내장 Hook) 사용하면 react state와 생명주기를 사용할 수 있다.
• 함수는 한번 호출되고 메모리 상에서 사라지기 때문에 state, 라이프 사이클 사용이 불가능했다.
• Hook은 class 안에서는 동작하지 않는다. 대신, class 대신 React를 사용할 수 있게 해 주는 것이다.
• useState 같은 내장 Hook을 몇 가지 제공한다.
• 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것 (= Custom Hook)도 가능하다.

Hook 사용 규칙

1. 최상위에서만 Hook을 호출해야 한다. 그리고 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 말자.
   -> 함수 바디 부분에서 사용해야 한다.

2. React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 된다.
   -> Hook을 호출할 수 있는 곳이 딱 한 군데 더 있다. 바로 직접 작성한 custom Hook 내이다.

State Hook

1. useState

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

useState 실행 시, state, setState 한 쌍이 부여된다.

• useState 메서드의 호출로, 배열 [state, setState]이 리턴값으로 들어왔다.
• initialState가 true일 때, 리턴한 값이 [] 배열이다.
• 배열에 들어오는 첫 번째가 state 변수로 할당, 두 번째로는 setState 변수로 할당이 된 것이다.
• setState는 전자의 state값으로 바꿔주는 함수이다.
• 상태 유지 값과 그 값을 갱신하는 함수를 반환해주는 것이다.
• 최초로 렌더링을 하는 동안, 반환된 state는 첫 번째 전달된 인자 initialState의 값과 같다.
• setState 함수는 state를 갱신할 때 사용한다. 새 state 값을 받아 컴포넌트 리레더링을 큐에 등록한다.

setState(newState + 1); // 새 값
setState(prev => prev + 1); // 이전에 가지고 있던 값

// 공부하기 위한 예제
function useState(init) {
  let value = init;
  
  funtion get() {
    return value;
  }
  
  function set(next) {
    value = next;
  }
  
  return [get, set];
}

const [state, useState] = useState("hooks");

state(); // hooks
setState("어려워~");
state(); // 어려워~

1. "hooks"이라는 문자열이 useState 메서드에 인자로 전달받는다.
2. 내부변수 value에 "hooks"이 저장된다.
3. get() 메서드는 value를 리턴한다.
4. set() 메서드는 인자로 다음 값을 받은 다음에, value를 다음 값으로 저장한다.
5. useState -> setState
6. return [get, set]; -> [state, useState]

// 함수 컴포넌트
function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0);
  const [isModalActiove, setIsModalActiove] = useState(false);
  
  return (
  	<div>
      <p> You clicked {count} times </p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <button onClick={() => setIsModalActive(!isModalActiove)}>
        Modal btn
      </button>
  );
}

Effect Hook

2. useEffect

useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해 준다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다.

render 할 때마다 useEffect가 돈다.
render 할 때마다 의존성배열을 체크해서 변경된 값을 확인하고, 변경된 값이 있다면 첫 번째로 전달된 인자의 함수를 실행시킨다.

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

useEffect(동작 function, 타이밍 Array);

배열 안에 담긴 값들이 바뀔 때마다 왼쪽 첫 번째 인자에 담아놓은 것을 동작하겠다.

• 명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다.
• setState를 통해서만 state를 업데이트 해왔듯이 useEffect를 사용하면 된다. useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행되게 될 것이다.
• 기본적으로 동작은 모든 렌더링이 완료된 후에 수행되지만, 어떤 값이 변경되었을 때만 실행되게 할 수 있다.

useEffect (() => {
  console.log("componentDidMount + componentDidUpdate");
}) // 타이밍 정해주지 않았으므로 매 render마다 실행됨

useEffect (() => {
  console.log("componentDidMount");
  return () => console.log("componentWillUnmount")
}, []) // 감지하는 state가 없으므로 한 번 실행되고 그 이후에는 실행되지 않음

// useEffect는 무조건 한 번은 실행된다.
function Hooks() {
  useEffect(() => {
    console.log("trigger");
  }) // 아무 타이밍도 정의되지 않았음 => 매 render 때마다
  
   useEffect(() => {
    console.log("CDM");
  }, []) // 빈 배열이기 때문에 아무 변화도 추적하지 않음 => CDM
  
  useEffect(() => {
    console.log("count", count)
  }, [count]) // count의 변화에 useEffect의 실행을 의존하도록 함 => CDU
  
  useEffect(() => {
   getData[page]
  }, [page])  //  CDM + CDU
  
  return <div onClick={() => sectCount(count + 1)}>hooks!</div>
}