REACT_HOOKS useState / useInput(Feat. Nomad)
아이키 언니랑 리액트 ㅎㅎㅎㅎㅎ HooK + Hooks! 의 만남 ㅎㅎㅎㅎ
만들고 현타옴 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
useState 실전 공부하기 위해서 Nomad Corder 무료 HOOKS 강의를 틀었다.
난 니꼬썜 좋다..ㅎㅎ 문법을 이해 못한다면 어렵지만, 코드를 보는 관점이 다른 코더들과 다르다. 이렇게 접근할 수도 있다는 걸 알려줘서 좋다.
useState 사용하기.
useState 응용하기 - useInput
기본 컴포넌트 구조
//HookInputs.JSX
const HookInputs = () => {
return (
<>
<input type="text" /> <button>입력</button>
</>
);
};
export default HookInputs;
state생성 후 setState로 value 담기
const HookInputs = () => {
const [value, setValue] = useState("");
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<>
<input type="text" value={value} onChange={handleChange} />{" "}
<button>입력</button>
</>
);
};
export default HookInputs;
state생성 후 조건문 넣기
const HookInputs = () => {
const [value, setValue] = useState("");
const validator = (value) => value.length < 8;
let checkValue = true;
const handleChange = (e) => {
if (typeof validator === "function") {
checkValue = validator(value);
if (!checkValue) return;
}
if (checkValue) setValue(e.target.value);
return;
};
return (
<>
<input type="text" value={value} onChange={handleChange} />{" "}
<button>입력</button>
</>
);
};
useInput으로 함수로 분리시키기
const useInput = (initialValue, validator) => {
const [value, setValue] = useState(initialValue);
let checkValue = true;
const onChange = (e) => {
if (typeof validator === "function") {
checkValue = validator(value);
}
if (checkValue) setValue(e.target.value);
};
return { value, onChange };
};
//useInput - state값 저장, validation검사
const HookInputs = () => {
const validator = (value) => value.length < 8;
const user = useInput("", validator);
return (
<>
<input type="text" {...user} /> <button>입력</button>
</>
);
};
export default HookInputs;
다음편에는 예제 해볼꺼임!
예제 디자인은
요거 만들꼬임!!!
Author And Source
이 문제에 관하여(REACT_HOOKS useState / useInput(Feat. Nomad)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@holicholicpop/REACTHOOKS-useState-useInputFeat.-Nomad저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)