useInput -> input을 업데이트하는 hooks
const useInput = (initialValue) => {
const [value, setValue] = useState(initialValue);
};
인자를 받아 상태의 초기값을 잡아준다.
export default function App() {
const name = useInput("Mr.");
return (
<div className="App">
<h1>Hello</h1>
<input placeholder="Name" />
</div>
);
};
useInput 초기값으로 name("Mr.") 을 설정해준다.
useInput 에서 value 값을 리턴해준다.
<input placeholder="Name" value={name.value} />
<input placeholder="Name" {...name} />
useInput에서 return해준 name값에 대입하여 가진 "Mr." 을 value에 기본값으로 부여 시켜준다.
{...name}을 사용하여 name이 가지고있는 모든요소를 풀어줄 수 도 있다.
const onChange = event => {
console.log(event.target)
}
return { value, onChange };
useInput에서 onChange 함수를 선언하여 value와 같이 return 해주면
<input placeholder="Name" value={name.value} onChange={name.onChange} />
input tag에서 onChange 속성을 부여하여 사용이 가능하다.
위처럼 value와 onChange 두개를 다 선언하여 name.() 로 가져올 수 도 있지만
<input placeholder="Name" {...name} />
으로 두개의 값을 한번에 가져올 수 도 있다
const useInput = (initialValue, validator) => {
const [value, setValue] = useState(initialValue);
};
두 개의 인자를 받아 상태의 초기값과 유효성 검사를 한다.
const onChange = (event) => {
console.log(event.target);
const {
target: { value }
} = event;
let willUpdate = true;
if (typeof validator === "function") {
willUpdate = validator(value);
}
if (willUpdate) {
setValue(value);
}
};
willUpdate 는 true로 선언되었으므로 항상 업데이트가 된다.
그러므로 validator의 타입이 function인지 검증하여 업데이트를 진행한다.
validator 가 function 이 아니라 다른 타입이 들어오면
validator(value) 이 부분에서 타입에러가 발생한다.
export default function App() {
const maxLen = (value) => value.length < 10;
const maxLen = (value) => !value.includes("@");
const name = useInput("Mr.", maxLen);
return (
<div className="App">
<h1>Hello</h1>
<input placeholder="Name" /*value={name.value}*/ {...name} />
</div>
);
}
return받은 value값을 이용하여 제약조건을 거는 함수를 생성할 수 있다.
함수를 useInput에 담아서 input에 {...name}으로 풀어준다.
value.length < 10; >>> input의 value값이 10이 넘지 않도록 하기
!value.includes("@"); >>> input의 value값에 @ 가 들어가지 않도록 하기
const useInput = (initialValue, validator) => {
const [value, setValue] = useState.apply(initialValue);
const onChange = (event) => {
console.log(event.target);
const {
target: { value }
} = event;
let willUpdate = true;
if (typeof validator === "function") {
willUpdate = validator(value);
}
if (willUpdate) {
setValue(value);
}
};
return { value, onChange };
};
export default function App() {
// const maxLen = (value) => value.length < 10;
const maxLen = (value) => !value.includes("@");
const name = useInput("Mr.", maxLen);
return (
<div className="App">
<h1>Hello</h1>
<input placeholder="Name" /*value={name.value}*/ {...name} />
</div>
);
}
전체코드
위와 같은 방법으로 작성시 다른 함수에서 이벤트를 처리 할 수 있다는 장점이 있다.
