[React hooks & typescript] useState 관리 - useInput 만들기

react hooks

 

개발을 하면서 input 태그를 사용하여 처리하는 것을 많이 사용 합니다 . 저도 input 태그를 엄청 사용하는데 사용할때마다 선언을 해주고 관리해주는게 정말 귀찮고 어렵습니다. 그래서 이전에 인강을 보고 정리해야지 미루었던 부분을 정리해보려고합니다. 

이전에 봤던 인강 사이트는 노마더 코더님 사이트입니다. react hooks에 대해서 정말 정리도 잘해주시고 무료로 제공해주시는 좋으신 분이십니다. 재사용성을 높이기 위해  함수형으로 hook을 사용 하는 방법을 자세하게 설명해 주셨습니다. 

 

nomadcoders.co/react-hooks-introduction/lobby

Watch Now - 노마드 코더 Nomad Coders

해당 프로세스에서 react hooks를 사용하고 + 타입 스크립트 까지 사용 해서 만들어 보도록 하겠습니다. 

 

1. 우선 리액트 파일에서 jsx 부분에 input 태그를 선언해 봅니다. 

const index = () => {
	return (
		<><input type="text" /></>
	);
};

 

2. export 형 함수에 react hooks를 선언해주고 value값을  return 해줍니다. 

// input hooks method
export const useInput = (initialState: string) => {
	const [value, setValue] = useState(initialState);
	return { value };
};

3. 기존 index파일에 선언합니다. 

const index = () => {
	const name = useInput("");
	return (
		<><input type="text" value={name.value}/></>
	);
};

4. onChange 함수까지만들어줍니다. 

// input hooks method
export const useInput = (
	initialState: string,
	validator?: (value: string) => boolean,
) => {
	const [value, setValue] = useState(initialState);
	const onChange = (event) => {
		const {
			target: { value },
		} = event;
		setValue(value);
	};
	return { value, onChange };
};

5. index 파일 수정합니다. 

const index = () => {
	const name = useInput("");
	return (
		<><input type="text" {...name}/></>
	);
};

{...name} 과 같은 스프레드 함수를 통해  value와 / onchange 함수를 적어둘 필요없이 불러올수 있습니다.

이렇게 만들어도 value와 onchange함수를 사용할 수있지만. validator 설정까지 해주면 더 완벽하게 사용할 수 있습니다. 

 

6. index 파일 수정을 합니다. 

const index = () => {
	const maxLength = (value: string) => value.length < 10; // vaidator예시함수 글자수 최대 10
	const name = useInput("", maxLength);
	return (
		<><input type="text" {...name}/></>
	);
};

7. useInput을 수정합니다. 

// input hooks method
export const useInput = (
	initialState: string,
	validator?: (value: string) => boolean,
) => {
	const [value, setValue] = useState(initialState);
	const onChange = (event) => {
		const {
			target: { value },
		} = event;
		if (validator === undefined) {
			setValue(value);
		} else {
			const willdata = validator(value);
			if (willdata) {
				setValue(value);
			}
		}
	};
	return { value, onChange };
};

 

- validtor은 반드시 필요하지 않을수도 있기때문에  validator? 형태로 선언을 해두었고

- validator? : (value: string)=> boolean 뜻은 validator 입력 값 value는 string이고 결과 return 값은 boolean 형태로 나온 다는 뜻입니다. 

- 내부에서 if else처리를 통해 validator이 없을 경우를 처리했습니다. 

- const willdata = validator(value) 처리를 통해서 입력값이 true일때만 입력값이 입력되도록 처리했습니다. 

 

결과값

이렇게 입력이 되었다면 성공입니다.