간단한 todo 앱 리팩토링 시도기 2편 (함수 추출하기, 컴포넌트 구조개선)

이어지는 글: https://growingtangerine.tistory.com/81

간단한 todo 앱 리팩토링 시도기 1편 (Fetch API, 함수 추출하기)

 

1편에 이어 남은 리팩토링도 계속 해봅시다!

 

3. 컴포넌트 구조 개선하기

 

두번째였던 "반복되는 input과 button을 컴포넌트로 빼서 코드의 가독성을 높이는 것" 작업을 수행하기 전에,

signin과 signup 컴포넌트에서 좀 더 개선할 부분을 찾았다. 

 

먼저, 반복되는 역할을 하는 코드가 가독성이 좋지 않게 작성되어 있는 부분을 발견했다.

로그인, 회원가입 모두 email, password input 태그의 onChange 이벤트 핸들러 함수가 그 역할을 한번에 알기 힘들게 작성되어 있었다.

의도한 코드의 역할은 각각 유효성 검사를 수행하고, 상태변경함수를 호출해 input의 값을 전달하는 것이다. 

그래서 handleValidCheck 라는 함수로 이메일, 비밀번호 유효성 검사하는 코드를 하나로 묶어냈다. 

마지막으로는 묶어낸 함수를 두 컴포넌트 총 4개의 input onChange에 핸들러 함수로 작성해주었다.

이렇게 하니, 함수 이름만 보아도 코드가 어떤 목적을 수행하고있는지 한눈에 볼 수 있게 되었다! :) 

 

한 가지 아쉬운 점은, handleValidCheck 함수 선언이 Signin.js 와 Signup.js 컴포넌트에서 한번씩 일어난다는 것이다.

이걸 더 상위 컴포넌트로 빼서 한번만 함수를 런타임에 등록해도 두 컴포넌트에서 쓸 수 있도록 개선하고 싶은데, 두 컴포넌트의 depth가 같고 함수 내부에 여러 상태와 상태 변경 함수가 작성되어있어 모두 props로 관리해주기가 더 복잡해질 것 같아, 우선은 넘어가도록 했다.

 

 

그 다음은 드디어 input과 button 컴포넌트 묶어내기.

 

과제 가산점 기한에 맞추느라 Todo.js 컴포넌트는 지옥 그 자체였다. (너무 창피해서 탈락해도 스스로 할 말이 없을 정도)

 

우선 Todo.js 컴포넌트 내 코드의 문제점을 파악해보자.

 

1. input과 button이 3회 이상 반복됨에도 컴포넌트로 묶어주지 않음.

2. Fetch API에 대한 이해 부족에서 비롯된 깔끔하지 않은 response 핸들링

3. 상태관리 로직이 쓸데없이 복잡함. 

4. fetch 요청을 커스텀 훅으로 빼서 관리해줘야 함. 반복되는 코드가 너무 많음!!! 

 

여기부터는 다음 리팩토링 시도기 글에서 계속 -