React Native useInputState 간단하지만 유용한 Hook

개요

안녕하세요 이번에 작성하게 될 내용은 제가 자주 사용하는 useInputState라는 hook입니다. 이 글은 ReactNative에서 작성했지만 Type만 바꾸면 React(Web) 환경에서도 정말 유용한 Hook이라 생각이 들어서 작성하게 됐습니다.

---

개발 환경

React-native(expo) + TypeScript로 진행되었습니다.

---

구현하게 된 계기

저는 개인적으로 개발할 때 의미 없는 반복을 정말 싫어하는 편입니다. 제가 custom hook을 잘 모르던 시절에 항상 반복하던 코드가 하나 있습니다.

개발 환경이 React 또는 React-Natvie에서도 항상 작성하던 그 코드는 사진과 같은 Input이 화면에 존재할 때 나타납니다.

const ScreenA = () => {
  const [text, setText] = useState('');

  return (
    <Container>
      <InputField
        value={text}
        onChangeHandler={(value) => {
          setText(value);
        }}
      />
    </Container>
  );
};

 

이런 똑같은 코드를 계속 반복하게 됩니다.
이런 반복을 줄이고자 custom hook을 만들었습니다.

---

구현

import { useCallback, useState } from 'react';

const outputDefault = (v: string) => v;

const useInputState = (
  initialValue = '',
  formatValue: (value: string) => string = outputDefault
) => {
  const [value, setValue] = useState(initialValue);

  const onValueChangeHandler = useCallback(
    (value: string) => {
      setValue(formatValue(value));
    },
    [formatValue]
  );

  return [value, onValueChangeHandler] as const;
};

export default useInputState;

---

코드 설명

 

parameter로 2개의 값을 받고 있습니다.
각각 역할을 설명해 보자면

 

• initialValue : 초깃값 세팅
• transformValue : 입력이 들어왔을 때 문자열에 변환이 필요하면 변환을 하여 return을 하는 함수
  • 기본적으로는 문자열을 그대로 출력할 확률이 높기 때문에 transformValue의 default 값을 echo라는 function으로 지정해놨습니다. 문자열을 그대로 return 해주는 함수입니다.

---

transformValue 사용 예시

  const testFunc = (value: string) => {
    //value의 .을 다 제거 하겠습니다.
    return value.replaceAll('.', '');
  };

  const [value, onChange] = useInputState('', testFunc);

---

React(Web)에서 사용한다면?

 

HTML 요소 Input에 사용한다면 

onValueChangeHandler의 Type을 변경해주도록 합니다 HTML Input의 onChange에 맞춰서

  const onValueChangeHandler: ChangeEventHandler<
    HTMLElement & { value: string }
  > = useCallback(
    ({ target: { value } }) => {
      setValue(outputDefault(value));
    },
    [formatValue]
  );

---

후기

이 useInputState라는 굉장히 간단한 hook이지만 이거만으로도 반복되는 코드들을 줄여 나가고 개발의 편의성을 높일 수 있습니다.
너무 어려운 로직을 위한 hook도 훌륭하지만 개인적으로 이렇게 간단한 코드로 개발 편의성을 올려주는 hook도 굉장히 훌륭하다고 생각합니다.

다음에도 이런 개발의 편의성을 올려주는 hook이 떠오른다면 글을 작성해 보도록 하겠습니다.