시작하기 앞서...이번에 프로젝트를 하면서 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 ( ..