(4).이정환_react.js강의_ React의 Hook의 정의, 규칙, 커스텀 훅 만들기

§1. Hook의 정의

: 17년 이후에 틀딱들이 Class 컴포넌트가 class의 문법이 ㅈ같다는 이유를 버리고, React 개발팀들이 따로 개발한 Function 컴포넌트 기법

예 : useState , useRef

§2. Hook의 규칙 :

• 규칙1_ Hook은 컴포넌트 내에서만 초기화되어야 한다.

예시 코드 :

import { useState } from "react";


const [var , setVar] = useState(0);//오류남

function HookExample(){

    return(<>
    </>);

}

• 규칙2_ if() , for() , while() 문안에 Hook사용할 수 없다

이유 : 이건 단순히 생각만 해보면, Hook은 렌더링과 관련되어있기에 , 렌더링을 for문 이지랄 나면 개꼬임

• ▲규칙3_ Hook을 useRef, useRouter, useState 등을 반복적일때, 이것들을 커스텀하여, 새로운 이름의 메소드로 나만의 Hook을 커스텀 할 수 있다.

§3.★★ Custom Hook 만들어보기 : //이거 많이 프로젝트 만들어 보자

상황 예시 :

import { useState } from "react";

function AcademyJoin() {
//여기서 부터
  const [name, setName] = useState(""); //이름

  const [sex, setSex] = useState(""); //성별

  const onChangeName = (event) => {
    setName(event.target.value);
  };
  const onChangeSex = (event) => {
    setName(event.target.value);
  };
  //여기서 까지의 부분이 다른 기관 가입할때도 중복이 될거임
}

export default AcademyJoin;

내 목표 : 저 부분을 따로 [Hooks] 폴더에 보관해놓고 편하게 쓸 수 있도록 코드 설계

방법 :

[Hooks/useInput.js]

import { useState } from "react";

function useInput() {
  const [input, setInput] = useState({
    name: "",
    sex: "",
  });

  const onChange = (event) => {
    setInput({
      ...input,
      [event.target.name]: event.target.value,
    });
  };

  return [input, onChange]; //★useState 변수 , 핸들러 반환
}

export default useInput;

[AcademJoin.js]

import useInput from "../Hooks/useInput";

function AcademyJoin() {
  const [input1, onChangeInput1] = useInput();

  return (
    <>
      <div>
        이름 :
        <input name="name" value={input1.name} onChange={onChangeInput1} />
      </div>
      <div>
        성별 :
        <select name="sex" value={input1.sex} onChange={onChangeInput1}>
          <option></option>
          <option>남자</option>
          <option>여자</option>
        </select>
      </div>
    </>
  );
}

export default AcademyJoin;