리액트 댓글 삭제 애니메이션 적용 관련 질문드립니다.

Question

안녕하세요 현재 리액트에서 타입스크립트로 게시판 댓글 기능을 구현중에 있습니다.기능 중 댓글 삭제 기능을 모두 구현 완료하였으나 애니메이션을 적용하고 싶은데어떠한 방법으로도 적용되지 않아 질문드립니다.댓글이 삭제될 때 fade out 또는 옆으로 슬라이드 되면서 부드럽게 사라지는 애니메이션을 구현하고 싶습니다.삭제는 정상적으로 작동되며, 댓글이 삭제되면 바로 해당 댓글이 사라지고 데이터가 업데이트됩니다.삭제 시 refetch() 가 바로 일어나기 때문에 애니메이션이 적용되지 않고 바로 업데이트 되는 걸까요?제가 작성한 전체 코드는 아래 링크에 올려놓았습니다.댓글 삭제 애니메이션 적용 관련 아시는 분이 계시다면 답변 부탁드리겠습니다. 감사합니다!소스코드 링크 : https://codekat.tistory.com/3

doooss · Answer

fade-out 에 대한 애니메이션 관련된 사항은, 리액트에서 흔히 나타나는 사항입니다. 가장 큰 원인은 데이터가 리렌더링 될때, DOM 에서 사라졌으니, 그렇습니다. 때문에, DOM 을 바로 리렌더링 하지 않게 하고, 애니메이션이 끝난 뒤에 사라지게 하면 됩니다. 제가 해당 기능을 구현하는 방법은 2가지를 주로 활용합니다. 1. 자체 구현 케이스 transition 상태를 하나 만들어서, 해당 액션이 일어났을때 success 가 일어나면 refetch 이전에 transition 상태를 활용해서, fade-out transition 을 만들고 해당 transition이 끝날때 retch 하도록 설계 (onTransitionEnd 를 활용할 수 있습니다.) (animation 을 사용한 경우 onAnimationEnd Api 를 활용하면 됩니다.) 2. 애니메이션 라이브러리 이용 저는 애니메이션 라이브러리 중 framer-motion 이라는 라이브러리를 종종 활용합니다. framer-motion 에는 AnimatePresence 라는 Wrapper 를 사용하면 값이 변경되었을때, DOM 을 애니메이션이 끝난뒤 없애도록 설계하기 쉽습니다.

리액트 댓글 삭제 애니메이션 적용 관련 질문드립니다.

1개의 답변

Q&A 목록