728x90 반응형 react hooks2 [프로젝트] React component: 마운트(mount)될 때와 언마운트(unmount)될 때 각기 다른 애니메이션 적용하기 (feat. onanimationend 프로퍼티) 멋진 웹사이트들을 보면 메뉴 버튼을 클릭했을 때 촤라락~🌼하면서 나왔다가 촤라락~🌼하면서 사라지는 경우를 자주 볼 수 있다. 내 프로젝트에도 메뉴가 토글될 때 그러한 애니메이션을 적용하고 싶어서, 가장 처음 시도했던 건 아래와 같이 slide-in 애니메이션을 만들어서 토글되는 메뉴에 적용시키는 것이었다. // Styled-Components의 keyframes이다. // 토글되는 메뉴의 width 길이 만큼 오른쪽에 숨겨놨다가 나오도록 했다 const slideIn = keyframes` from { right: -500px; } to { right: 0; } `; 그런데, 이렇게 단순히 slideIn 애니메이션만을 추가하면, 한가지 문제가 발생한다. 바로, 메뉴를 토글해서 메뉴 컴포넌트가 마운트될 때.. 2021. 9. 1. [React] React hooks 연습: 간단한 To-Do 리스트 리액트를 배운 뒤 모두가 한번쯤은 만들어본다는 To-do list를 만들었다. 다양한 hooks를 연습하고 싶었지만 아무래도 to-do 리스트는 많은 기능이 없기 때문에 useState()만을 사용하게 되었다. 최상단 App 컴포넌트 아래에 List 컴포넌트, 그리고 그 안에 Todo 작성 Form과 To-do 리스트만 있는 아주 콤팩트한 앱이다. 요 to-do list의 간단한 기능은 아래와 같다. 최상단 컴포넌트 최상단 컴포넌트인 App에 초기값으로 initialTodos를 만들었다. 각 todo엔 key값으로 써줄 id와 todo 내용, 그리고 완료 여부를 표시하는 completed만 있다. import './App.css' import List from './List' import { useSta.. 2021. 5. 18. 이전 1 다음 728x90 반응형
