아이키 언니랑 리액트 ㅎㅎㅎㅎㅎ 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;

다음편에는 예제 해볼꺼임!
예제 디자인은

요거 만들꼬임!!!