React Hooks - 02 / useState를 활용한 useInput
- useState를 활용한 useInput
input 내용과 그에 따른 이벤트를 useState hooks를 통해 관리할 수 있음.
1. useInput은 하나의 initialValue를 받음
value는 변화될 값이며, setValue는 value를 변화시키기 위해 존재하는 값
가장 초반의 value 값은 useState(initialValue) 값과 같음
onChange를 통하여 event라는 매개변수를 받아 value의 값을 변화시킬 것임.
name이라는 상수를 선언. 이는 useInput에 "Mr."라는 값을 대입한 결과값임.
"Mr."를 대입하면 initialValue가 Mr.가 되고 value 값 역시 Mr.가 됨
input을 하나 생성하여 value에 name.value를 담아줌
value는 Mr.가 됨
import { useState } from "react";
import "./styles.css";
const useInput = (initialValue) => {
const [value, setValue] = useState(initialValue);
const onChange = (event) => {
console.log(event.target);
}
return { value, onChange };
// value는 name.value를 갖게 됨
};
export default function App() {
const name = useInput("Mr.");
// 어떤 변화를 주기 전에 이 기본값(Mr.)을 value와 함께 return하고 싶음
// name은 value와 같아질 것
return (
<div className="App">
<h1>Hello</h1>
<input placeholder="Name" value={name.value} onChange={name.onChange} />
{/* value={name.value} 대신 {...name}으로 써도 name 안에 있는 모든 것을 풀어줌 */}
</div>
);
}
- validator function을 이용한 유효성 검증 기능 추가
2. validator
validator는 특정 유효성(최대길이나 등등)을 검증하는 기능임. (한 마디로 검증 기능)
이것은 hook의 기능이 아님.
2-1. 검증하고자 하는 function에 validator를 매개변수로 넣어줌
2-2. wiiIUpdate를 선언해줌
willUpdate는 끊임없이 Update를 해주며 validator function을 감시 (검증도 함)
willUpdate는 let으로 선언하여 false에서 true로 바뀔 수 있도록 해줌.
2-3. validator가 function인지 검증. function이 아닌 다른 타입이 들어올 경우 타입 에러가 터짐.
먼저 validator가 function인지부터 검증하여
validator의 type이 function이라면 willUpdate는 validator(value)가 됨.
2-4. wiiUpdate가 true라면 setValue(value)를 하여 input에 값을 담아줌
2-5. App으로 돌아와 maxLen이라는 상수를 선언. 여기서 value의 길이를 제한해줌.
기존에 만들었던 name의 useInput 함수에 maxLen을 담아주면
value.length <= 10 이 아니라면 setvalue(value)를 할 수 없게 됨(input에 값이 담기지 않음 => 글이 써지지 않음)
value.length의 길이가 10 이하이면 true, 초과면 false.
import { useState } from "react";
import "./styles.css";
const useInput = (initialValue, validator) => {
const [value, setValue] = useState(initialValue);
const onChange = (event) => {
const {
target: { value }
} = event;
//setValue(event.target.value);
let willUpdate = true;
if (typeof validator === "function") {
// validator 가 function 이 아니라 다른 타입이 들어오면 타입에러 터짐
willUpdate = validator(value);
}
if (willUpdate) {
setValue(value);
}
};
return { value, onChange };
// value는 name.value를 갖게 됨
};
// name을 사용해서 useInput에 Mr. 와 maxLen을 넣어줄 거임
// 매번 validator는 바뀔 거고
// validator 타입이 function이라면 willUpdate에 validator의 결과를 업로드할 것
// 이 케이스에서 validator는 maxLen이고 결과는 True 또는 False가 될 것
// value의 길이가 10 이하면 True가 될 것이고 Update를 할 수 있음
export default function App() {
const maxLen = (value) => value.length <= 10;
const name = useInput("Mr.", maxLen);
// 어떤 변화를 주기 전에 이 기본값(Mr.)을 value와 함께 return하고 싶음
// name은 value와 같아질 것
console.log(name.value);
return (
<div className="App">
<h1>Hello</h1>
<input placeholder="Name" value={name.value} onChange={name.onChange} />
{/* value={name.value} 대신 {...name}으로 써도 name 안에 있는 모든 것을 풀어줌 */}
</div>
);
}
📢 중간중간 알아보는 지식
1. const {target : {value}} = event 와 const value = event.target.value 가 같은 이유는?
코드를 줄이기 위하여 구조분해를 사용
구조 분해의 사용법 예제
let person = {
name: 'David',
age: 15,
job: 'Programmer'
}
const { name, age } = person; // Takes the property/method from the object
console.log(name); // Prints 'David'
console.log(age); // Prints '15'
구조 분해를 사용하지 않았을 때
const name = person.name;
const age = person.age;
2. value = { name.value } 대신 { ...name } 사용
value = { name.value }를 사용하는 대신 { ...name }를 사용하면 const의 모든 걸 다 unpacking 해줌
name.value와 값이 같아짐. 결과 또한 동일하게 나옴