[멋쟁이 사자처럼 프론트엔드 스쿨] 70일차 TIL - Motion One, forwardRef

🍰 수업 때 한 번 줌 소리가 아예 안 들린 적이 있어서 매우 당황했다. 무슨 문제지;

🍴 Motion One

: JavaScript 애니메이션 라이브러리.

• React와 같은 프레임워크에 의존하지 않고, CSS와 JavaScript 만으로 애니메이션을 구현할 수 있게 해줌.
• Web Animations API(WAAPI)를 활용하여 고성능 애니메이션을 제공함.
  • WAAPI: 브라우저에 내장된 네이티브 애니메이션 API
  • JavaScript에서 직접 제어할 수 있어 정밀한 애니메이션 가능
• 작은 파일 크기로도 고성능 애니메이션 구현 가능 - 웹 페이지의 로딩 시간 최소화에 기여함

pnpm add motion

// 사용하고자 하는 파일에서
import { animate } from 'motion'; // 추가하기

 

🍴 forwardRef

: 부모 컴포넌트가 자식 컴포넌트의 DOM 노드에 접근 할 수 있도록 하는 방법.

• 리액트에서 'ref'는 주로 DOM 요소나 클래스 컴포넌트의 인스턴스 메서드에 접근하는 데 사용됨.
• 'ref'를 자식 컴포넌트에 전달할 때 자식 컴포넌트가 이를 전달하지 않으면 부모는 직접 접근할 수 없음.
• 자식 컴포넌트를 forwardRef 로 감싸면, 부모 컴포넌트에서 전달한 'ref'를 자식 컴포넌트가 받을 수 있음.
• forwardRef로 감싸진 자식 컴포넌트는 'ref'를 두 번째 인자로 받을 수 있으며, 이 'ref'를 내부의 DOM 요소에 전달할 수 있음.
• 단, forwardRef() 함수 사용 시 propTypes, defaultProps를 지원하지 않음. TypeScript로 넘어가기!
• 리액트 19버전에서는 forwardRef를 안 써도 ref를 전달할 수 있게 함. (지금은 아직 18이니까~)