10.4 Hooks 규칙 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

React Hook 규칙

1. 리액트 훅은 리액트 함수에서만 호출한다.

아래의 코드는 passwordReducer와 Login 함수가 있다.

이코드는 Login.js 파일의 코드들이고 Login 함수는 리액트 컴포넌트 함수인걸 알 수 있다.

따라서 useState같은 리액트 훅은 Login 함수 안에서만 선언할 수 있다.

하지만 passwordReducer는 리액트 컴포넌트 함수가 아니다.

따라서 passwordReducer 함수 안에서는 리액트 훅을 사용할 수없다.

const passwordReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    return { value: action.val, isVaild: action.val.trim().length > 6 };
  }
  if (action.type === "INPUT_BLUR") {
    return { value: state.value, isVaild: state.value.trim().length > 6 };
  }
  return { value: "", isVaild: false };
};

const Login = (props) => {
  const [formIsValid, setFormIsValid] = useState(false);
  .
  .
  .
  
  // Login.js

 

 

2. 리액트 훅은 리액트 컴포넌트 함수 또는 사용자 정의 훅 함수의 최상위 수준에서만 호출한다.

아래의 코드는 리액트 컴포넌트 함수인 Login함수에서  state와 effect가 훅으로 사용되어있다.

Login 함수는 최상위 수준이기때문에 훅을 사용할 수있지만, useEffect에 중첩으로 사용된 useState는 사용이 불가하다.

그리고 if문에서도 훅을 불러올 수 없다.

  
  const Login = (props) => {
  const [formIsValid, setFormIsValid] = useState(false); // 가능
  .
  .
  .
    useEffect(() => { // 가능
    console.log("EFFECT RUNNING");

	useState(); // 불가

    return () => {
      console.log("EFFECT CLEANUP");
    };
  }, []);
  
  // Login.js

3. useEffect는 항상, 참조하는 모든 항목을 의존성으로 useEffect 내부에 추가해야 한다.

아래 코드의 useEffefct는 주변컴포넌트에서 아무것도 가져와 사용하지 않고 있다.

오직 console.log 뿐이다. console.log나 setTimeout같은 브라우저API는 관계가 없으므로 의존성 으로 추가가 된거 없는걸 확인할 수있다.

  useEffect(() => {
    console.log("EFFECT RUNNING");

    return () => {
      console.log("EFFECT CLEANUP");
    };
  }, []);

하지만 아래의 useEffect는 주변 컴포넌트에서 emailIsValid,passwordIsValid 를 가져와 사용하고 있다.

따라서 이런 값들은 의존성으로 추가 되었다. 

엄밀히 따지면 setFormIsValid 함수도 추가해야한다. 왜냐하면 브라우저API가 아니기 때문

하지만 이것은 규칙 예외이다. 

useReducer 또는 useState에 의해 노출된 state 업데이트 함수는 변경되지 않도록 리액트가 보장한다.

따라서 의존성으로 추가할 필요는 없다.

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("Checking form validity!");
      setFormIsValid(emailIsValid && passwordIsValid);
    }, 500);

    return () => {
      console.log("CLEANUP");
      clearTimeout(identifier);
    };
  }, [emailIsValid, passwordIsValid]);

하지만 실수로 state 업데이트 함수를 추가하더라도 에러를 반환하지 않는다. 생략해도 될 뿐이다.

그리고 useEffect 에 의존성이 필요하지만 누락 되었을 경우 에러를 반환해주기 때문에 무조건 외울 필요는없다.