choijming21 님의 블로그

1.  문제 발생❓ 제 프로젝트에서는 네비게이션바(GNB)의 버튼들이 두 가지 다른 기능을 수행해야 했습니다:특정 섹션으로 자동 스크롤 되는 버튼 ( "/ " => 해당 섹션으로 이동 )새로운 페이지로 이동하는 버튼 ( "/resource" ) 이러한 두 기능을 사용하는 버튼이 각각 있었는데, 문제는 페이지 이동 후에도 원래의 페이지에서 자동 스크롤 기능을 유지해야 한다는 점이었습니다. 즉, 다른 페이지에서 특정 섹션으로 이동하는 버튼을 클릭 했을 때, 메인 페이지로 이동한 다음 해당 섹션으로 자동 스크롤 되어야 했습니다.    2.  해결 과정 📋 이 문제를 해결하기 위해 useNavigationHandler 커스텀 훅을 개발했습니다. 이 훅은 버튼 클릭 시 동작을 결정하고, 필요에 따라 페이지 이동..

제가 팀프로젝트에서 이번에 적용해야 할 것은 유저가 버튼(전체 스터디 보기)을 클릭했을 때, 자동으로 전체 스터디 컴포넌트로 스크롤 되는 동작을 구현해야 합니다:) 그럼 먼저 useRef에 대해 알아보도록 하겠습니다.  1. useRef란?React 공식 홈페이지에서는 ".current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다." 라고 설명하고 있습니다.쉽게 말하자면, useRef의 Ref는 reference(참조)의 줄임말로 저장공간 또는 DOM 요소에 접근하기 위해 사용되는 React Hook입니다. 주요한 특징은 특정한 DOM 요소에 접근이 가능하며, 불필요한 재렌더링을 하지 않는다..