1. 구현하기

진행 상황

• 로그인, 회원가입 페이지 CSS
• 유효성 검사 커스텀 훅 완성
• 로그인 상태관리 리듀서 작성

진행 예정

• 내주변 미용실 페이지

2. TIL

커스텀훅 useEffect 에러

커스텀훅으로 효율성을 높이기

저번 프리 프로젝트에 이어 이번에도 로그인, 회원가입 부분을 맡게 되었다. 이번에는 닉네임 변경, 비밀번호 변경 기능도 추가되어서 조금 더 효율적으로 인풋과 폼을 관리하고 싶었다.
전에는 하나의 파일에서 onChange 될 때마다 상태를 변경해주고, 유효성을 검사했었다. 그래서 파일의 길이가 매우 길어졌고, 이번 프로젝트에서는 그 점을 개선하고 싶었다.
어떤 방법으로 개선할까 생각하다 이번 프로젝트에서는 유효성 검사를 하게 될 일이 많아져서 유효성 검사 커스텀 훅을 만들어 재사용을 하면 효율적으로 기능 구현을 할 수 있겠다는 생각이 들었다.
우선 회원가입 폼에 해당하는 모든 상태의 유효성 검사 훅을 만들었고, 제대로 기능하는 것을 확인한 후 로그인 폼에 적용시켰더니 흰 화면에 콘솔창엔 에러가 떴다.

시도한 방법

length가 없다고 뜨는 메시지에서 커스텀 훅의 첫 번째 useEffect 부분인 닉네임 유효성 검사부분에서 문제가 있어 에러가 났음을 알게 되었다.
회원가입 부분에는 닉네임이 있는데 로그인 부분에는 닉네임이 없어서 에러가 나는 것 같아 if로 닉네임이 있다면 상태가 변경되는 함수를 감싼 조건문으로 들어가게 한번 더 감싸주었다.

function useValid(value) {
 const [validText, setValidText] = useState({
    nickname:'',
	email: '',
	password: '',
	confirmPassword: ''
 });
 const [isValid, setIsValid] = useState({
  	nickname: false, 
  	email: false, 
  	password: false, 
  	confirmPassword: false,
 });
  
useEffect(() => {
  const regex = /^[A-Za-z0-9]{2, 10}$/;
  if(value.nickname) {
    if (value.nickname. length > 0 && !regex.test (value.nickname) {
		// 생략
	}
}

해결 방법

하지만 에러는 그대로였다. 하지만 에러의 원인은 확실했다. useEffect가 렌더링 시 한번 수행되는데 이때 닉네임이 없어서 undefined라고 에러가 뜨는 것이었다. 아무래도 분리해서 작성하는 것이 좋겠다고 생각이 들어서 모든 상태의 유효성 검사 useEffect 부분을 분리해서 하나의 커스텀훅으로 만들어주었고, 따로 따로 적용하니 에러는 사라진 것을 확인할 수 있었다.

function useNickname(value) {
	const [validNicknameText, setValidNicknameText] = useState('');
	const [isValidNickname, setIsValidNickname] = useState(false);

	useEffect(() => {
		const regex = /^[A-Za-z0-9]{2,10}$/;
		if (value.length > 0 && !regex.test(value)) {
          // 생략
	}, [value]);

	return {validNicknameText, isValidNickname};
}