Framer-motion을 통해서 컴포넌트에 등장 애니메이션 적용한 저번 포스트에 이어서 이번 포스트에서는 페이지 이동시 자연스럽게 전환되도록 애니메이션 효과를 적용해보도록 하겠습니다. react-transition-group 같은 패키지를 사용해도 무방하지만 저번 포스트에서 framer-motion으로 진행했기 때문에 같은 라이브러리를 사용해서 진행해 보겠습니다. 우선 framer-motion이 설치되있지 않은 분들은 아래 명령어를 통해 설치해주시길 바랍니다. npm i framer-motion // 또는 yarn Animate Presence 로 애니메이션 적용하기 페이지간의 자연스러운 이동을 위해서는 Framer에서 제공하는 AnimatePresence라는 컴포넌트를 사용해야합니다. 해당 컴포넌트를..

이번 포스트에서는 스크롤을 내려 특정 요소가 화면에 보일 때 자연스러운 애니메이션 효과가 날 수 있도록 구현해보도록 하겠습니다. 사용할 패키지는 애니메이션을 선언형으로 손쉽게, 그리고 직관적으로 구성할 수 있도록 해주는 framer-motion 그리고 특정 요소가 화면에 들어왔는지 감지할 수 있도록 해주는 react-intersection-observer 입니다. react-intersection-observer는 아래 포스트에서 무한 스크롤을 구현하기 위해 사용했던 intersection observer의 api를 react에서 훅 형태로 쉽게 관리하고 사용할 수 있도록 만든 패키지이기 때문에 그냥 직접 구현해서 사용해도 되지만 최대한 효율적이면서 손쉽게 구현하기 위해 사용해보도록 하겠습니다. [Fir..

티스토리 블로그를 자주 쓰신다면 가로로 스크롤 진행률이 표시되는 UI를 많이 보셨을 것입니다. 많은 브라우저에서 세로 스크롤을 잘 안 보이도록 감춰놓는 경우가 많기 때문에 얼마나 읽어야지 콘텐츠가 끝이 나는지 짐작하기가 어렵습니다. 이때 가로 스크롤 진행률 UI를 사용한다면 사용자들도 콘텐츠의 길이를 한 번에 확인할 수 있고, 좋은 색상만 선택한다면 외관상 한층 업그레이드된 느낌을 받을 수 있습니다. 아래 이미지는 필자가 개발하고 있는 웹에 해당 UI가 적용된 모습입니다. 해당 UI는 요구사항은 아니었지만 비교적 긴 매거진 콘텐츠에서 사용자가 얼마나 읽었는지 짐작할 수 있는 UI는 꼭 필요하다고 생각했기 때문에 추가하게 되었습니다. 추후에는 해당 바에 주요 제목들을 링크해두고 바로 이동할 수 있도록 기능..

Quill Editor란? 공식문서에 따르면 Quill Editor는 모던 웹을 위한 오픈소스 WYSIWYG 에디터라고 소개하고 있다. WYSIWYG는 What You See Is What You Get의 약자로, 편집 과정에서의 화면 포맷이 최종 완성본이랑 거의 똑같이 나오게 된다는 의미로 쓰이고 있다. 우리가 흔히 알고 있는 네이버, 다음 블로그, 미디엄, 등 여러 플랫폼에서 사용자가 직접 쓰는 콘텐츠에는 WYSIWYG 에디터가 사용되고 있다. 이미 모든게 갖춰진 에디터를 사용할 수 있으면 좋겠지만 모든 에디터가 오픈소스는 아니기에 새로운 에디터를 개발할게 아니라면 기존의 오픈소스 에디터에서 필요한 기능들을 추가해서 사용해야 한다. 그중에서 필자가 추천하는 에디터는 지금부터 사용해볼 Quill Edi..

이번 포스트에서는 리액트 메모이제이션 훅으로 사용되고 있는 useMemo와 useCallback에 대해 알아보자. 위키피디아에 따르면 메모이제이션(memoization)이란 동일한 계산을 반복할 때, 이전에 계산한 값을 메모리에 저장해서 동일한 계산의 반복을 제거하면서 프로그램 실행 속도를 높이는 기술이다 리액트에서 메모이제이션이 필요한 이유 이 포스트를 읽고 있을 독자들은 어떨지 모르겠지만 필자는 리액트를 처음 접했을 때, 관련 컴포넌트가 아닌데도 불구하고 부모 컴포넌트가 변경되었다는 이유로 해당 컴포넌트 전체가 재정의/실행되어야 한다는 점이 좀 마음에 걸렸다. 이때 메모이제이션을 이용하면 이전 상태에서 변화가 없다면 메모리에 저장해두었던 값/함수를 사용하기 때문에 컴포넌트 전체를 다시 계산해서 그릴 ..

오늘은 커스텀 훅을 사용해 드롭다운 메뉴를 만들어 보도록 하겠다. 드롭다운 메뉴의 종류가 여러 개 있지만 이 포스트에서는 그냥 평범하게 어떤 버튼을 클릭했을 때 아래와 같이 메뉴/옵션이 나오는 형식, 그리고 메뉴 밖을 클릭했을땐 메뉴가 닫히도록 설계를 해보겠다. 원리는 간단하다. useDetectClose 라는 커스텀 훅을 만들고 현재 상태가 열린 (isOpen) 상태라면 그에 맞게 css만 적용해주면 된다. 그럼 커스텀 훅 부터 살펴보자. hooks/useDetectCLose.js import { useEffect, useState } from "react"; const useDetectClose = (elem, initialState) => { const [isOpen, setIsOpen] = use..