시작하며...모달창이 열렸을 때 아래 방식으로 스크롤을 없앨 수 있다.document.body.style.overflow = 'hidden';  그런데 나는 원래 스크롤이 있던 화면에 모달이 열렸다고 스크롤이 사라지고 모달이 닫히면 다시 생기는 게 먼가 살짝 불편했다. 😅그래서 다른 방법으로 해결해 보았다! 기존 모달과 스크롤기존에는 모달창이 열려있으면 스크롤을 마음대로 움직일 수 있는 상황이었다.  스크롤 방지위에 말했다시피 useEffect 를 사용하여 열렸을 때 아래 코드를 적용해서 해결할 수 있다.document.body.style.overflow = 'hidden'; 전역 스타일 수정그런데 다른 방법 찾아보았다!바로 전역 스타일에서 아래 코드를 추가하면 된다. 그러면 페이지 높이가 고정되어 스..

시작하기 앞서...이번에 프로젝트를 하면서 framer motion 을 활용하여 버튼, 모달, 스크롤, 화면 전환 애니메이션을 적용하였다.그래서 사용 방법에 대해 자세하게 정리하기 위해 글을 작성하게 되었다. Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com  Framer motion 적용Framer motion 을 사용한 다섯 가지 애니메이션을 적용할 것이다.버튼 애니메이션모달 애니메이션스크롤 애니메이션화면 전환 애니메이션 우선 Framer motion 을 사용하기 위해 해당 라이브러리를 설치한다.npm install framer-moti..

☘️ useRef 란?useRef 는 React Hook 중 하나이며, 공식 문서에 따르면 useRef 를 다음과 같이 설명한다. useRef.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환하고, 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지[출처: React 공식문서] useRef 는 DOM 요소에 직접 접근하기 위해 사용되며, 변하는 값을 유지하기 위해 사용된다.그래서 버튼을 눌러 원하는 요소로 스크롤하기 위해 Dom 요소에 직접 접근하는 useRef 가 사용된다. ☘️ 구현하기화면 만들기먼저 기본적인 화면을 만들어 준다.// App.jsximport './App.css';function App() { return ( ..