Today I Learned - 0723

devsooki·2021년 7월 23일
1
post-thumbnail

useInput()

input을 업데이트 하는데 사용하는 함수이다.
장점은 다른 function에서 이벤트를 처리 가능하게 해주며 이벤트를 분리된 파일, 다른 entity에 연결해서 처리 가능하게 해준다.

다양하게 커스텀하여 오픈소스로 배포가능하니 나중에 꼭 도전해 볼 것✍🏻

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => {
    const {
      target: { value },
    } = e;

    let willUpdate = true;
    if (typeof validator === 'function') {
      willUpdate = validator(value);
    }
    if (willUpdate) {
      setValue(value);
    }
  };

  return { value, onChange };
  // {value : value}의 경우 {value}로 표기 가능
};

const App = () => {
  const maxLen = (value) => value.length <= 10;
  const name = useInput('sooki', maxLen);

  return (
    <>
      <h1>Hello</h1>
      <input placeholder='Name' {...name} />
      {/* value={name.value} onChange={name.onChange}대신 {...name} 표현 가능*/}
    </>
  );
};



오늘의 느낀점!
자바스크립트 기본기가 조금 부족한거 같다.
기본부터 더 빡세게 공부해야겠다🙄🔥

profile
주니어 개발자의 기록하는 공간✍🏻

0개의 댓글