Frontend

기존 Class 컴포넌트로 작성된 API 호출 로직을 Hooks로 마이그레이션했다. Custom Hook을 활용해 반복되는 로딩/에러 처리 로직을 재사용 가능한 형태로 개선한 과정을 기록한다.

클래스 컴포넌트로 작성된 API 호출 로직을 Hooks로 마이그레이션했다. Custom Hook을 만들어 반복되는 로딩/에러 처리 패턴을 정리한 과정을 기록한다.

프로젝트에 React Hooks를 본격 도입하면서 반복되는 로직을 Custom Hook으로 분리했다. 초기에는 HOC와 render props로 해결하던 문제들이 훨씬 간결해졌고, 특히 폼 핸들링과 API 호출 로직에서 효과가 컸다.

팀 프로젝트에 React Hooks를 본격 도입하면서 반복 사용하는 로직을 Custom Hook으로 분리했다. useForm, useFetch 등 실제 사용 중인 패턴을 정리했다.

컴포넌트 언마운트 후에도 setState가 호출되는 warning이 계속 발생했다. useEffect의 cleanup 함수를 제대로 활용하지 못한 것이 원인이었다.

프로젝트에 React Hooks를 본격적으로 도입하면서 반복되는 API 호출 로직을 Custom Hook으로 분리했다. useFetch 훅을 만들어 로딩, 에러 처리를 일관되게 관리할 수 있게 되었다.

팀 코드베이스에서 bind() 사용 시 타입 추론이 제대로 되지 않아 런타임 에러가 발생했다. TypeScript 3.5의 strictBindCallApply 옵션을 활성화해 문제를 해결한 과정을 기록한다.

레거시 클래스 컴포넌트로 작성된 폼을 Hooks 기반으로 리팩토링했다. Custom Hook을 만들어 검증 로직을 재사용 가능하게 분리하는 과정을 정리했다.

기존 Class 컴포넌트를 Hooks로 전환하면서 useEffect 의존성 배열 때문에 겪은 무한 루프 이슈와 해결 과정을 정리했다. componentDidMount와 componentDidUpdate의 동작 방식 차이를 제대로 이해하지 못해 발생한 문제였다.

프로젝트에 React Hooks를 본격적으로 도입하면서 반복되는 API 호출 로직을 Custom Hook으로 추출했다. useEffect와 useState를 조합해 로딩, 에러 상태를 관리하는 패턴을 정리했다.