[Hooks] 3. useInput

앞으로 만들게 될 hooks들의 다른점을 살펴보는 건 꽤 가치 있는 일이 될거다.

 

처음으로 다뤄볼 hooks는 useInput이다.

useInput은 기본적으로 input을 업데이트 한다.

 

우선 초깃값을 받을거다.

---

Mr.를 내 이름의 기본값으로 설정하자.

---

우리는 어떤 변화를 주기 전에,

이 기본값(Mr.)을 value와 함께 return하고 싶다.

useInput은 value를 return 할거고 이제 name은 value랑 같아지고,

그런 다음 value는 name.value를 갖게 된다.

 

value={name.value} 대신에 {...name} 도 가능하다. name 안에 있는 모든것을 펼치는거다.

 

Mr. 라는 값을 initialValue로 받아서 useState의 initalValue로 전달돼서

value로 잘 갈거다.

---

onChange 함수를 만들어보자.

값을 입력하면 console.log에 아래와 같이 출력된다.

---

이제 useInput을 조금 더 확장시켜보자.

이걸 NPM에 등록해서 사람들이 쓸 수 있도록

 

initalValue를 사용하는 대신에 유효성을 검증하는 기능을 포함시켜보자.

willUpdate는 true니까 항상 업데이트 될거다.

---

최대길이를 검증하는 함수

 

기본값을 validator function에 있는 value로 전달해 줄거고,

validator function이 true 또는 false를 return 하길 바란다.

이 케이스에서 하고 싶은건 value의 길이를 저장하는거다.

 name을 사용해서 useInput에 Mr와 maxLen을 넣어줄거다.

매번 validator는 바뀔거고 validator 타입이 function이라면

willUpdate에 validator의 결과를 업로드할거다.

이 케이스에서 validator는 maxLen이고 그 결과는 True 나 False가 될거다.

 

만약 value의 길이가 10보다 작으면 true가 될거다.

 

willUpdate가 true라면 우리는 Mr.를 화면에 띄울거다.

---

---

참고로 이건 hooks 와는 관계가 없다.

하지만 function을 좀 더 예쁘게 만들었고, 검증기능을 갖게 되었다.

validator가 true라면 willUpdate는 true가 돼서 실행될 것이고, value를 세팅할 수 있는거다.

 

---

@를 포함하고 있으면 true를 return 할거다.

 

근데 value 앞에 느낌표를 붙이면 @가 포함됐을때 업데이트를 하지 않는다.

@ 를 누르면 동작하지 않는다.

---

export를 앞에 붙여서 VSC 에 저장해둔다.

 

export const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const onChange = event => {
    const {
      target: {value}
    } = event;
    let willUpdate = true;
    if(typeof validator === "function"){
      willUpdate = validator(value); //value의 유효성검사 실행
    }
    if(willUpdate){
      setValue(value);
    };
  }
  return {value, onChange};
}

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.