// useInput.js
import { useState } from "react";
const useInput = (initialValue, validator) => {
const [value, setValue] = useState(initialValue); // 첫번째 파라미터로 받은 값을 value에 입력
const onChange = (event) => { // 값이 변경된 경우
const { // 이벤트 객체에 담겨있는 현재의 텍스트 값을 value에 저장
target: { value },
} = event;
let willUpdate = true;
if (typeof validator === "function") { // 두번째 파라미터로 받은 값이 함수인 경우
willUpdate = validator(value); // value를 해당 함수에 넣어서 실행
}
if (willUpdate) {
setValue(value); // input값 변경
}
};
return { value, onChange };
};
export default useInput;
// index.js
import React from "react";
import ReactDOM from "react-dom";
import useInput from "./useInput";
const App = () => {
const maxLen = (value) => value.length <= 10; // 글자수가 10자이하면 true 반환
const name = useInput("Mr.", maxLen); // useInput를 통해 반환 된 값 name에 저장
return (
<div className="App">
<input placeholder="Name" {...name} /> <!-- 반환된 값들 input에 입력 -->
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
input에 사용되는 코드들을 useInput.js파일로 분리해서 사용했습니다.
validator라는 파라미터에 함수를 넘겨주어서 해당 결과가 false인 경우에 입력이 되지 않게 하였습니다.
'React' 카테고리의 다른 글
[React] title (0) | 2021.01.08 |
---|---|
[React] 배열 값 동적 출력 (0) | 2021.01.08 |
[React] useState (0) | 2021.01.08 |
[React] 간단한 게임 사이트 (0) | 2020.12.18 |
[React] gh-pages (0) | 2020.12.16 |