Lighthouse of FE beginner

들어가며저번 포스팅에서 사례로 살펴보는 커스텀 훅이라는 글로 여러 케이스의 커스텀 훅을 소개드렸습니다. 이번 포스팅에서는 소개하지 못했던 사례인 특정 훅을 사용하면서도 여러 컴포넌트에서 사용 가능해 추상화가 가능할 경우를 실제로 구현했던 과정에서 왜 이런 설계를 했는지 고민했던 과정을 남겨보겠습니다. 과정문제 제기먼저 이번 사례는 프로젝트 개선 과정에서 도출된 사례입니다. 진행중인 프로젝트의 대시보드에서는 툴팁을 직접 구현해서 사용하고 있습니다.툴팁의 위치를 계산하기 위해 마우스 커서의 위치를 반환하고 해당 x, y축의 좌표값을 컴포넌트의 top, left로 사용하고 있습니다.이 과정에서 툴팁 컴포넌트가 Viewport의 끝단에 마주칠경우 툴팁이 화면에 보이지 않는 영역에 위치해버려 스크롤이 생기는 케이..

들어가며리액트로 프론트엔드 개발을 하다보면 여러 컴포넌트에서 공통으로 사용하는 로직과 아주 동일한 코드는 아니지만 비슷한 비즈니스 로직을 여러 컴포넌트에서 사용하는 케이스가 있습니다. 단순한 순수 함수로써 리액트의 생명주기와 관련이 없는 로직이라면 유틸성 함수로 분리할 수 있지만, 해당 로직에 리액트 컴포넌트의 생명주기 혹은 리액트 API가 포함되어 있다면 일반 함수로 분리할 수 없습니다. 그 이유는 리액트의 훅(Hook)은 반드시 훅이나 컴포넌트 내부에서 사용해야 하기 때문입니다. 커스텀 훅(Custom Hook)이란?커스텀 훅이란 말 그대로 리액트의 API를 사용하는 사용자 정의 훅입니다. 요즘의 리액트는 대부분 함수 컴포넌트로 개발을 합니다. 주류였던 클래스형 컴포넌트를 비주류로 내려오게 만든 업데..