- input 정보를 업데이트하는 hook
- useState 및 onChange()를 사용하여 input에 관련된 정보를 처리.
import React, {useState} from 'react';
import ReactDom from 'react-dom';
import "./styles.css";
const useInput = (initValue) => {
const [value, setValue] = useState(initValue)
const onChange = event => {
console.log(event.target)
}
return {value, onChane};
}
const App = () => {
const name = useInput("Mr.")
return(
<div classname="App">
<h1>hello</h1>
<input placeholder="name" value={name.value} onChange={name.onChange}>
</div>
);
}
ReactDom.render(<app />, document.querySelector("root"));
import React, {useState} from 'react';
import ReactDom from 'react-dom';
import "./styles.css";
const useInput = (initValue, validator) => {
const [value, setValue] = useState(initValue);
const onChange = event => {
const {
target: {value}
} = event;
let willUpdate = true;
if(typeof validator === 'function') {
willUpdate = validator(value);
}
if(willUpdate) setValue(value);
}
return {value, onChange};
}
const App = () => {
const maxLen = (value => value.length < 10)
const name = useInput("Mr.", maxLen);
return(
<div classname="App">
<h1>hello</h1>
<input placeholder="Name" {...name}>
</div>
);
}
ReactDom.render(<app />, document.querySelector("root"));
export const useInput = (initValue, validator) => {
const [value, setValue] = useState(initValue);
const onChange = event => {
const {
target: {value}
} = event;
let willUpdate = true;
if(typeof validator === 'function') {
willUpdate = validator(value);
}
if(willUpdate) setValue(value);
}
return {value, onChange};
}