show-selected를 클릭 하면 아래 리스트들이 드롭다운 되어야 한다.
여기서 핵심은 클릭의 상태값을 state값으로써 두고(①) 이 state값이 변할 때 마다 useEffect안에서(②) gsap 메서드가 실행되는 구조이다. 에니메이션 대상은 useRef로 특정지을 수 있다.
useEffect는 컴포넌트가 마운트, 언마운트 될때 마다 실행이되기 때문에 useEffect안에서 애니메이션 기능을 구현해 두면
페이지 로드 후 무조건 실행된다. 이를 막고자 첫번째 useEffect 안에서 gsap의 timeline 메서드로 작동될 애니메이션을 "pasuse" 상태로 두고, 클릭 시 실행될 애니메이션의 내용을 작업한다.
두번째 useEffect 안에서는 state값에 따라 애니메이션을 "play" 또는 "reverse" 되도록 한다. 이렇게 toggle 기능이 완성되었다.
'React.js' 카테고리의 다른 글
| [심층분석] useEffect & dependency array (feat. API race condition, useEffect 클린업 코드) (0) | 2022.10.12 |
|---|---|
| 리액트의 작동원리 (0) | 2022.10.06 |
| 깨달음 (리액트 비동기) (0) | 2022.08.11 |
| [CSS-in-JS] styled-components (0) | 2022.08.06 |
| 외부에서 컴포넌트 생성 (컴포넌트의 확장성, 재활용성) (0) | 2022.08.03 |
댓글