Hook규칙

1. Hook은 컴포넌트가 렌더링 될 때 마다 매번 같은 순서로 호출되어야한다.
   

이렇게 쓰면 안 된다.

• 렌더링 할 때마다 Hook과 같은 순서대로 호출되는 것이 아니라, 조건문의 결과에 따라 호출되는 hook이 달라진다.

• hook은 꼭 최상위 레벨에서만 호출해야 한다.

정리

1. Hook은 무조건 최상위 레벨에서만 호출해야한다.

2. 리액트 함수 컴포넌트에서만 Hook를 호출해야 된다.

Custom Hook

1. 이름이 Hook으로 시작하고 내부에서 다른 Hook을 호출하는 하나의 자바스크립트 함수

2. Custom Hook의 이름은 꼭 use로 시작해야한다.

[Custom Hook]

• 눈여겨 봐야 될 점은 useStateHook을 사용해서 userid라는 state를 만들었다.

• userId는 다음에 나오는 userUserStateHook의 파라미터로 들어감

• Hook사이에선 이렇게 데이터를 공유한다.

실습

useCounter.jsx

import React from "react";
import { useState } from "react";

function useCounter(initiaValue) {
  const [count, setCount] = useState(initiaValue);

  const increaseCount = () => setCount((count) => count + 1);
  const decreseCount = () => setCount((count) => Math.max(count - 1, 0));

  return [count, increaseCount, decreseCount];
}

// 
export default useCounter;

Accommdate.jsx

import React, { useEffect, useState } from "react";
import useCounter from "./useCounter";

const MAX_CAPACITY = 10;

function Accommdate(props) {
  const [isFull, setIsFull] = useState(false);
  const [count, increaseCount, decreseCount] = useCounter(0);

  useEffect(() => {
    console.log("========================");
    console.log("useEffect() is called");
    console.log(`isFull : ${isFull}`);
  });

  useEffect(() => {
    setIsFull(count >= MAX_CAPACITY);
    console.log(`Current count value : ${count}`)
  },[count]);

  return (
    <div style = {{padding:16}}>
        <p>{`총 ${count}명을 수용했습니다.`}</p>
        <button onClick = {increaseCount} disabled = {isFull}>입장</button>
        <button onClick = {decreseCount}>퇴장</button>

        {isFull && <p style={{color:"red"}}>정원이가득찼습니다.</p>}
    </div>
  )
}

export default Accommdate;

• 의존성 배열이 있는 배열과 의존성 배열이 없는 배열로 설계

  • 의존성 배열이 없는경우 : 컴포넌트가 업데이트 될 때마다 호출된다.

  • 의존성 배열이 있는 경우 : 컴포넌트가 마운트된 직후에 호출되며, count 값이 바뀔 떄마다 호출된다. + 용량이 바뀌었는지 확인을 위해 setIsFull로 저장한다.

    

두 개의 의존성배열이 출력됐다.

의존성 배열이 없는 경우에는 컴포넌트가 업데이트 될 떄마다 호출되었고, 의존성 배열이 있는 경우에는 클릭 했을 떄 1증가했다.

정원이 가득 찼을 땐?

의존성배열이 있는 hook은 실행되지않았다.