[React] Hooks 의 규칙

SuamKang·2023년 7월 11일

React React Hooks

React

목록 보기

20/34

Rules of Hooks

리엑트 훅은
함수형 컴포넌트로 로직을 구성할때 좀 더 상태를 관리하기 편하고 유용하게 대처하기 위해서 리액트에서 제공하는 기능이다.

useState, useEffect, useReducer,useContext 등등 더 많은 기능이 탑재된 훅들이 존재한다.

이러한 훅들은 사용하는 규칙이 있고 이는 매우 중요하다.
리액트 훅은 단순히 "use"로 시작하는 모든 함수이다.

1. 리액트 컴포넌트 함수에서만 호출(import)해야 한다.

리액트 컴포넌트 함수 혹은 사용자 정의 훅(custom hooks)에서 호출 가능하다.

예를 들면

import React, { useState, useEffect, useReducer, useContext } from "react";

import Card from "../UI/Card/Card";
import classes from "./Login.module.css";
import Button from "../UI/Button/Button";
import AuthContext from "../../store/auth-context";

// 이메일 리듀서
const emailReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    return { value: action.payload, isValid: action.payload.includes("@") };
  }
  if (action.type === "INPUT_BLUR") {
    return { value: state.value, isValid: state.value.includes("@") };
  }

  return { value: "", isValid: false };
};

// 비번 리듀서
const passwordReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    return { value: action.payload, isValid: action.payload.trim().length > 6 };
  }
  if (action.type === "INPUT_BLUR") {
    return { value: state.value, isValid: state.value.trim().lenth > 6 };
  }

  return { value: "", isValid: false };
};

const Login = (props) => {
  const [formIsValid, setFormIsValid] = useState(false);
  const [email, emailDispatch] = useReducer(emailReducer, {
    value: "",
    isValid: null,
  });
  const [password, passwordDispatch] = useReducer(passwordReducer, {
    value: "",
    isValid: null,
  });

  const authCtx = useContext(AuthContext);

  const { isValid: isValidEmail } = email;
  const { isValid: isValidPassWord } = password;

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("useEffect안 사이드이펙트 로직 실행");
      setFormIsValid(isValidEmail && isValidPassWord);
    }, 1000);

    return () => {
      console.log("이전 로직 초기화");
      clearTimeout(identifier);
    };
  }, [isValidEmail, isValidPassWord]);

  // 이메일 입력 함수
  const emailChangeHandler = (event) => {
    emailDispatch({ type: "USER_INPUT", payload: event.target.value });
  };

  // 비번 입력 함수
  const passwordChangeHandler = (event) => {
    passwordDispatch({ type: "USER_INPUT", payload: event.target.value });
  };

  // 이메일 스타일 유효성 함수
  const validateEmailHandler = () => {
    emailDispatch({ type: "INPUT_BLUR" });
  };

  // 비번 스타일 유효성 함수
  const validatePasswordHandler = () => {
    passwordDispatch({ type: "INPUT_BLUR" });
  };

  // 새로운 폼 전달 함수
  const submitHandler = (event) => {
    event.preventDefault();
    authCtx.onLogin(email.value, password.value);
  };

  return (
    <Card className={classes.login}>
      <form onSubmit={submitHandler}>
        <div
          className={`${classes.control} ${
            email.isValid === false ? classes.invalid : ""
          }`}
        >
          <label htmlFor="email">E-Mail</label>
          <input
            type="email"
            id="email"
            value={email.value}
            onChange={emailChangeHandler}
            onBlur={validateEmailHandler}
          />
        </div>
        <div
          className={`${classes.control} ${
            password.isValid === false ? classes.invalid : ""
          }`}
        >
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            value={password.value}
            onChange={passwordChangeHandler}
            onBlur={validatePasswordHandler}
          />
        </div>
        <div className={classes.actions}>
          <Button type="submit" className={classes.btn} disabled={!formIsValid}>
            Login
          </Button>
        </div>
      </form>
    </Card>
  );
};

export default Login;