React 10

react-hook-form

개념

이전까지 모든 state를 직접 만들고, onChange함수도 일일히 만들어 바인딩해주는 등 노가다성 코딩을 배웠지만, 폼 라이브러리를 사용하면 더이상 노가다성 코딩을 하지않고 편리하다.
폼 라이브러리에는 react-hook-form, react-form, formilk, redux-form 등이 있다.

장점

state가 변화할때마다 렌더딩이 되기때문에 불필요한 렌더링이 지속적으로 일어나 비효율적이었다. 하지만 react-hook-form은 input의 값을 실시간으로 state에 반영하는 것이 아닌 등록함수가 될 때 한번에 처리하기 때문에 불필요한 렌더링이 제거되고 한번에 바꿔 렌더링하기 때문에 빠르고 효율적이다. => 비제어 컴포넌트라한다.

예시

const ReactHookForm = ()=>{
// react-hook-form useForm 에서 useForm을 제공한다
const {register, handleSubmit } = useForm()
// 등록하기 함수 -> handleSubmit이 조종해주는 함수
 const onClickSubmit = (data)=>{
    console.log(data)
  }
  return(
    <form onSubmit={handleSubmit(onClickSubmit)}>
      <input type="text" {...register("state이름")}/>
      <button type="reset">등록하기</button>
    </form>
) }
export default ReactHookForm

Formilk 라이브러리

Formik은 React Native에서 컴포넌트를 빌드하기 위한 React 구성 요소 및 hook들의 작은 그룹
Formilk
참조해서 봐라.

useReducer vs useState 비교

useReducer 사용할 때
상태값들이 많이 있거나 업데이트 로직이 많이 복잡할 때, 개별적으로 관리되며 서로 연관되어있는 상태에 사용하면 좋다.

ex) useReducer

import { useReducer } from 'react';
const initialInputState = {
	value: '',
	isTouched: false
}
const inputStateReducer = (state, action) => {
	if(action.type === 'INPUT') {
		return { value: action.value, isTouched: state.isTouched };
	}
	if(action.type === 'BLUR') {
		return { isTouched: true , value: state.value };
	}
	if(action.type === 'RESET') {
		return { isTouched: false, value: '' };
	}
	return inputStateReducer
};
const useInput = (validateValue) => {
	const [inputState, dispatch] = useReducer(inputStateReducer, initialInputState)
	const valueIsValid = validateValue(inputState.value);
	const hasError = !valueIsValid && inputState.isTouched;
	const valueChangeHandler = (event) => {
		dispatch({type: 'INPUT', value: event.target.value});
	  };
	const inputBlurHandler = (event) => {
		dispatch({type: 'BLUR'});
	};
	const reset = () => {
		dispatch({type: 'RESET'})
	};
	return {
		value: inputState.value, 
		isValid: valueIsValid,
		hasError, 
		valueChangeHandler, 
		inputBlurHandler,
		reset
	};
};

ex) useState

import { useState } from "react";
const useInput = (validateValue) => {
	const [enteredValue, setEnteredValue] = useState('');
	const [isTouched, setIsTouched] = useState(false);
	const valueIsValid = validateValue(enteredValue);
	const hasError = !valueIsValid && isTouched;
	const valueChangeHandler = (event) => {
		setEnteredValue(event.target.value);
	  };
	const inputBlurHandler = (event) => {
		setIsTouched(true);
	};
	const reset = () => {
		setEnteredValue('');
		setIsTouched(false);
	};
	return {
		value: enteredValue, 
		isValid: valueIsValid,
		hasError, 
		valueChangeHandler, 
		inputBlurHandler,
		reset
	};
};

고고고고고