[REACT] React Hooks

React Hooks

클래스 컴포넌트 기능을 함수 컴포넌트에서 이용할 수 있도록 하는것

useRef 나 useState 같은것들도 모두 훅이다.(tip. 접두사에 use 붙으면 훅임)

커스텀 훅 만들기

HookExam.jsx

import {useState} from "react";
import useInput from "../hooks/useInput";

//3가지 Hook 관련 팁

//1.Hook은 함수 컴포넌트 내부에서만 호출 가능
//2.조건문, 반복문 에서는 호출할 수 없다.
//3.커스텀 Hook을 직접 만들 수 있다.
const HookExam = () => {
    const [input1, onChange1] = useInput();
    const [input2, onChange2] = useInput();

    return (
        <div>
            <input value={input1} onChange={onChange1} />
            <input value={input2} onChange={onChange2} />
        </div>
    );
};

export default HookExam;

useInput.jsx

import {useState} from "react";

function useInput(){
    const [input, setInput] = useState("");

    const onChange = (e) => {
        setInput(e.target.value);
    };

    return [input, onChange];
}

export default useInput;

App.jsx

import { useState } from "react";
import HookExam from './components/HookExam';
function App() {

  return (    
    <>
    <HookExam />
    </>
    );
  }

export default App;