Custom Hooks

중복코드 줄여보자~~~

input을 만들었을 경우

 

App.jsx

import React from "react";
import { useState } from "react";

function App() {
	const [name, setName] = useState('')
    const [password, setPassword] = useState('')
    
    const onChangeNameHandler = (e) => {
    	setName(e.target.vaule)
    }
    
    const onChangePasswordHandler = (e) => {
    	setPassword(e.target.vaule)
    }
    
    return <div>
    	<input type="text" value={name} onChange={onChangeNameHandler} />
        <input type="text" value={name} onChange={onChangePasswordHandler} />

hooks > useInput.js

cosnt useInput = () => {
	// state
    const [value, setValue] = useState('')
    
    // handler
    const handler = (e) => {
    	setValue(e.target.value)
    }
    
    return [value, handler];
}

export default useInput;

useInput 커스텀 훅 불러오기!

import React from "react";
// import { useState } from "react";
import useInput from "./fooks/useInput";

function App() {
	// 이렇게만 만들어도 밑에서 다 쓸 수 있다.
	const [name, onChangeNameHandler] = useInput('')
    const [name, onChangePasswordHandler] = useInput('')
    
    // const [name, setName] = useState('')
    // const [password, setPassword] = useState('')
    
    // const onChangeNameHandler = (e) => {
    //	   setName(e.target.vaule)
    // }
    
    // const onChangePasswordHandler = (e) => {
    //	   setPassword(e.target.vaule)
    // }
    
    return <div>
    	<input type="text" value={name} onChange={onChangeNameHandler} />
        <input type="text" value={name} onChange={onChangePasswordHandler} />