커스텀 Hooks

여러 컴포넌트에서 비슷한 기능을 고유할 경우, 이를 여러분만의 Hook으로 작성하여 로직을 재사용 할 수 있습니다.

userInput.js

import { useState } from "react";

export function useInput(initVal, submitAction) {
    const [inputVal, setInputVal] = useState(initVal);

    const handleChange = (e) => {
        setInputVal(e.target.value);
    }
    const handleSubmit = () => {
        setInputVal("");
        submitAction(inputVal);
    }
    return [inputVal, handleChange, handleSubmit];
}

CustHook.js

import { useInput } from './useInput';
function displayMsg(msg) {
    alert(msg);
}

const CustHook = () => {
    const[inputVal, handleChange, handleSubmit] = useInput('', displayMsg);

    return (
        <div>
            <h1>Custom Hook Test</h1>
            <input value={inputVal} onChange={handleChange} />
            <button onClick={handleSubmit}>확인</button>
        </div>
    )
}
export default CustHook;