들어가며...

거의 모든 CRUD 프로젝트를 한다면 만드는 것이있다.
로그인/회원가입...
기본중의 기본이지만, 이따금씩 react-form을 사용한다던지 쉽게 가는것 보단 react에서 제공해주는 hook과 렌더링 관계 라던지, prop전달, 컴포넌트 트리 관계를 이해하려면 직접 구현해보는게 좋다고 생각한다.

useState남발하지 않기

먼저 처음 리액트를 접해볼 경우 state를 input마다 만들어줘서 컴포넌트 초입에 상당히 많은 useState를 선언했다. 이런 경우 state의 네이밍에도 신경을 써야하고, 많은 state를 관리하다 보니 추후 렌더링 관련해서 리팩토링을 할때 손조차 대기 힘들때가 많다. (prop등을 어디어디에 전달해줬는지 찾는것도 일이다)

useState가 많은 코드

리액트를 입문했을 당시의 코드이다.
id입력값, id유효성체크, 유효성에따른 라벨 등
아이디 단 하나의 인풋으로도 3개의 상태를 관리하고 있다.
만약 아이디,패스워드 단 두가지만 입력해야하는 폼이면 상관없을 수도 있으나, 더 많은 입력을 받아 유효성을 검사할경우 입력값 한개당 x3으로 상태를 관리해야한다.

state의 초기값 설정

리액트를 배우기전 자바스크립트를 배울때 구조분해할당과 rest사용법을 익힌다. 이 것을 활용해서 간단하게 써보면

form이라는 객체와 setForm으로 객체를 수정하는 함수를 useState로 선언한다.
form의 초기 property로 email과 password를 선언했다.

이제 input혹은 textarea의 속성으로 다음과 같이 선언한다.

사진은 input을 컴포넌트로 만들어서 조금 속성 정의가 다르지만, 여튼 value와 onChange를 사진과 같이 사용하면 굳이 changeHandler를 따로 선언하거나 하는일 없이 state객체에 접근해서 사용할수 있다.

더 많은 입력을 받아도 다음과 같이

보다 일관성있게 사용할수 있다.

유효성검사

그러면 입력은 잘 관리하는데... 유효성검사는 어떻게 쉽게 할수 있을까?

input컴포넌트에서 관리하는 경우

의외로 이 경우가 쉽다.
input컴포넌트에 유효성검사 함수를 선언하고, 유효성 검사로 나오는 text들을 input컴포넌트 아래에 div나 span을 잡아서 보여주면 된다.

이런식으로 valueType을 전달해주고

받은 valueType을 validation함수의 인자로 넣어 switch혹은 if-else로 email일경우, password일 경우를 핸들링 해줘서 인풋 바로밑에 리턴받은 문자열을 넣어주면 된다.

page단에서 여러 input을 관리하는 경우

이 케이스에서 많이들 어려워 할 것이다.
email이 입력되면 email의 유효성 검사를 한 후 유효성 text와 true/false 반환,
password가 입력되면 password의 유효성 검사를 한 후 유효성 text와 true/false 반환

이를 묶어서 해결하기에 어렵기 때문이다.
그래서 내 경우 useValid 훅을 만들어 사용했다.

각기 다른 케이스로 validText를 띄울수 있도록하고, 객체의 속성값에 true/false를 관리해서 동적인 UI를 만들수 있도록 했다.
각기 다른 form속성의 length가 바뀌면 useEffect의 디펜던시를 걸어 실행되는 조건문이 다르도록 구성했다.