📌 Intro Infinite Scroll 은 말그대로 무한한 스크롤을 의미한다. 스마트폰이 대중화 되면서, 모바일웹이나 앱에서 페이지네이션을 통한 데이터 더 불러오기 방식은 사용자에게 큰 불편함을 불러일으킨다. 인피니티 스크롤은 이러한 관점에서 작은 스크린에서 단순 스크롤로 데이터를 더 불러오는 방식을 제공함으로 인해, 사용자에게 아주 좋은 UX를 제공해준다. 🛠 Infinite Scroll 구현 방식 infinite Scroll을 구현하는 방식은 크게 두 가지로 나뉜다. scroll event IntersectionObserver scroll Event 스크롤 이벤트를 사용한 방법은 스크롤이 페이지의 끝에 닿았는지를 확인하고 추가적인 데이터를 불러오는 방식이다. 스크롤 이벤트를 사용한 방법은 쉽게 생각 및 구현이 가능하지만, 잦은 이벤트 호출로 인해 reflow, repaint 가 자주 일어나 성능이

📌 Intro React는 16 버전부터 앱의 하위 컴포넌트 트리에서 발생하는 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 ErrorBoundary라는 개념을 도입하였다. ErrorBoundary를 통해 컴포넌트에서 에러가 발생했을 때 이를 캐치하여 리포팅하고, 사용자들에게 에러가 발생하여 앱이 중단되는 것이 아닌 다른 대체 화면을 보여줄 수 있다. ErrorBoundary를 잘 이용하여 앱단과 오류가 발생할 컴포넌트에 잘 감싸주고, 사용자에게 보여줄 화면을 잘 활용(ex-새로고침 화면 보여주기)한다면, 좋은 에러 핸들링이 될 것이다. 이 포스팅에서는 내가 실제로 적용을 해보면서 필요에 맞게 커스텀한 ErrorBoundary를 소개해보고자 한다. ⚙️ ErrorBoundary 리엑트의 공식 홈페이지에서는 다음 코드와 같이 에러핸들링을 보여주고 있다. 대충 보자면, 에러의 상태를 st

React-use-Form을 사용하다 보면, useRef를 연결하여 사용할 일(스크롤 관련이나, 포커싱 관련 이벤트를 처리할 때)이 종종 있다. 예를 들어, textarea의 인풋 창을 수정할 때 value의 높이에 따라 textarea의 크기를 조절할 때가 있다. 그런 경우, 간단하게 아래의 코드처럼 useRef를 reactFrom 요소와 연결한 뒤, 평소에 사용하던 것처럼 useRef를 사용해주면 간단하게 해결이 된다. >#### Reference React Hook Form FAQS

사용자가 뒤로가기를 눌렀을 때, 이를 막는 팝업을 띄우는 이슈를 처리할 일이 생겼다. 구글링을 통해 찾아본 결과, 위와 같은 방법이 가장 널리 쓰이는 뒤로가기 막기 방법 중 하나였다. 이 방법을 React 프로젝트에 적용하여 사용하였을 때, 다음과 같은 2가지 문제에 직면했다. > - 뒤로가기를 눌렀을 때, popstate 이벤트가 두 번 실행되는 문제 특정 브라우저에서 뒤로가기를 막고자 하는 화면에 포커싱을 주지 않고 뒤로가기를 누르면 뒤로 가기가 막히지 않고 되는 문제 1. 뒤로가기를 눌렀을 때, popstate 이벤트가 두 번 실행되는 문제 리엑트로 위의 방식으로 뒤로가기 막기를 구현한다면 다음과 같은 코드가 될 것이다. ![](https://images.velog.io/images/rkd028/post/54737f79-ab17-46a7-8045-2e0377a36ca8/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84