텍스트# 들어가기전, Bottom Sheet란?

출처: 네이버 지도

보임/숨김을 사용자가 지정할 수 있고, 하단에 고정되어 선택 옵션 등의 컨텐츠가 들어가는 컴포넌트이다.
주로 모바일 사이즈 웹 페이지나 어플리케이션에 사용된다.

1. Framer Motion란?

Framer Motion is a simple yet powerful motion library for React.
It powers the amazing animations and interactions in Framer, the web builder for creative pros. Zero code, maximum speed.

Framer Motion은 React를 위한 심플하지만 강력한 모션 라이브러리 입니다.
창의적인 전문가들을 위한 웹 빌더인 Framer는 엄청난 애니메이션과 상호작용을 제공합니다. 제로 코드, 최대 속도.
Reference: https://www.framer.com/motion/introduction/

(오역 발견 시 제보 부탁드립니다.)

웹 빌더인 Framer를 만든 회사에서 제작한 React 프레임워크를 위한 모션 라이브러리이다.
Hover, Scroll, Touch 등과 같은 상호작용들에 적용할 수 있는 다양한 모션들을 제공한다.

또한 컴포넌트 애니메이팅을 위한 다양한 유틸리티들도 제공하고 있어서 동적인 웹 페이지를 구성하는 데 굉장히 유용한 라이브러리이다.

2. Bottom Sheet 컴포넌트 만들기

BottomSheet.jsx

import { motion } from "framer-motion";

const BottomSheet = () => {
	<motion.div style={{width: 100%, height: "500px"}}>
      {...codes} // 편의를 위해 세부 코드는 생략합니다.
    </motion.div>
}

Bottom Sheet 구현을 위한 컴포넌트를 생성한다.
이때 사용되는 motion은 framer-motion 라이브러리에서 제공하는 컴포넌트들이다.
a, div, ul, svg 등과 같은 원시 DOM들을 모션 컴포넌트화하여 제공한다.

3. Animation 삽입

애니메이션을 삽입하기 전에, framer-motion에서 제공하는 AnimatePresence 컴포넌트에 대해 알아보자.

AnimatePresence
Animate components when they're removed from the React tree.

컴포넌트들이 React Tree에서 제거될 때 애니메이션을 실행합니다.
Reference: https://www.framer.com/motion/animate-presence/

컴포넌트가 React DOM Tree에서 제거될 때, 즉 컴포넌트가 언마운트 될 때 애니메이션을 실행할 수 있게 도와주는 컴포넌트이다.
보통 컴포넌트를 조건부 렌더링하게 되면 컴포넌트가 언마운트 될 때 애니메이션을 정의하기가 힘들다.
이때 AnimatePresence 를 통해 컴포넌트가 마운트/언마운트 될 때 애니메이션들을 일관적으로 정의할 수 있다.

레이아웃 컴포넌트단에서 Bottom Sheet을 삽입할 것이기 때문에, Layout 컴포넌트에서 AnimatePresence를 정의할 것이다.
또한 조건부 렌더링을 위해 visible state도 정의한다.

Layout.jsx

import { AnimatePresence } from "framer-motion";

const Layout = () => {
  	const [visible, setVisible] = useState(false);
	<AnimatePresence>
      {visible && <BottomSheet />}
    </AnimatePresence>
};

export default Layout;

그리고 BottomSheet 컴포넌트로 돌아가서, 초기 옵션과 exit 옵션을 설정한다.

BottomSheet.jsx

import { motion } from "framer-motion";

const BottomSheet = () => {
	<motion.div
  	 style={{width: 100%, height: "500px"}}
	 key="bottomSheet"
	 initial={{y: 500}} // 초기 옵션
     animate={{y: 0}} // 애니메이션 실행 후 옵션
     exit={{y: 500}} // 컴포넌트 언마운트 후 옵션
	>
      {...codes} // 편의를 위해 세부 코드는 생략합니다.
    </motion.div>
}

이때 key Prop도 정의를 해주어야 한다.
AnimatePresence 컴포넌트 내에 존재하는 Motion Component들이 key 값을 가지고 있어야 트리 내에서 컴포넌트의 존재를 추적할 수 있기 때문이다.. 라고 설명하고 있다.

4. 완료 ✨

위에서 설명했던 코드들로는 이렇게까진 구현이 안되지만.. 어느정도 개념만 잡기 위해 글을 작성했다.
그래도 AnimatePresence를 통해 성공적으로 마운트/언마운트 애니메이션을 구현했다.
기존엔 보여지는 게 되게 딱딱하게 보여졌다 안보여졌다 그랬는데, 이렇게 동적인 애니메이션을 삽입하니 깔끔해서 보기 좋구만.

References

https://velog.io/@sangpok/React-Bottom-Sheet
https://www.framer.com/motion/animate-presence/