마치 디그다와 같이 위아래로 애니메이션으로 처리되고 포함하고있는 컴포넌트가 변경되는 컴포넌트가 필요해졌다. 그래서 디그다를 가져다 사용할꺼다! Yes !, it is Diglett
Github Project : https://github.com/users/Hansanghyeon/projects/8?add_cards_query=is%3Aopen
Preview
모션 같은 경우는 Framer-motion으로 구현하였다. 예전 같았으면 GSAP로 적용했겠지만 요즘 사용하다보니 프레이머 모션이 좀더 편하고 디자인 작업들이 피그마를 통해서 만들어지는 경우가 많아서 이참에 프레이머 모션으로 작업을 많이하고 숙련하려고 프레이머 모션으로 구현하였다.
❗️ 문제가 발생했다.
framer-motion으로 keyframe과 같이 중간 프레임(안보여지는 상태)에서 컴포넌트가 변경되어야한다… 그러면 어떻게해야할까?
의식적으로 찾아본 키워드는 Delay Render Component
위와 같은 키워드로 찾아보니까 다들 API로 결과값을 받아서 그 값을 적용한 컴포넌트를 반환하는 방식으로 많이 들 알려줬다. 미리 로딩해서 담아두는 방식으로 많이 알려줬다.
하지만 내가 원하는건 그게아닌데? Suspense 이런거 말고..
그러다 Delayed 관련 커스텀 훅을 보았다
import React, { useState, useEffect } from 'react';
// component
import { DiglettRoot, MoveWrap } from './index.style';
type props = {
type: string;
};
const RenderComponent = ({ type }: props) => {
switch (type) {
case 'Demo2':
return <Demo2 />;
case 'Demo3':
return <Demo3 />;
default:
return <Demo1 />;
}
};
const variansts = {
show: { translateY: 0 },
hidden: { translateY: '100%' },
toggle: {
translateY: [0, 0, '100%', '100%', 0, 0],
borderTopLeftRadius: [0, '20%', '20%', '20%', '20%', 0],
borderTopRightRadius: [0, '20%', '20%', '20%', '20%', 0],
},
};
const Diglett: React.FC<props> = ({ type }: props) => {
const [delayedType, setDelayedType] = useState('');
useEffect(() => {
const timeout = setTimeout(() => setDelayedType(type), 400);
return () => clearTimeout(timeout);
});
return (
<DiglettRoot>
<MoveWrap
key={type}
animate="toggle"
variants={variansts}
transition={{
duration: 1.5,
times: [0, 0.2, 0.3, 0.7, 0.8, 1],
ease: 'easeInOut',
repeatDelay: 1,
}}
>
{RenderComponent({ type: delayedType })}
</MoveWrap>
</DiglettRoot>
);
};
export default Diglett;Code language: JavaScript (javascript)이건 이제 Diglett의 최종본인데 type을 받아서 해당 타입에 맞는 컴포넌트를 렌더할것이다. 렌더되는 함수의 타입값을 상태값으로 넘겨주고 그 상태값을 딜레이후에 변경해서 바로 컴포넌트를 바꾸는 방식으로 구현해봤다.
지금 몇줄안되게 설명했지만
이 방법을 찾기위해서 몇시간동안 테스트하고 고민하고 바꿔보고 너무나 힘들었지만 원하는 컴포넌트를 만들어서 알차다!!
Next
현재는 한 컴포넌트에 대해서만 제작해봤다. 여러가지 모든 컴포넌트에 적용해야하는 것을 인지 하지 못하고 제작한 것같다.
변경될 컴포넌트들에 대해서 switch를 통해서 변경되고 분기를 나눌 기준을 enum을 통해서 해당 값에 맡는 조건으로 렌더링하려했다. 근데 enum을 type prop받아서 사용하는데 그럼 type prop: type은 무엇으로 정의해하지? 그리고 받은 타입으로 설정해서 사용해야한다. 지금 생각나는 것은 union type, advance type 무엇이 맞을까? 분명히 받은 타입에대해서 해당 타입을 사용하는 법을 배웠는데
다시한번 찾아서 공부해야겠다.
해당 컴포넌트는 여기서 살펴볼수있다
https://publisher.hyeon.pro/?path=/story/02-molecules-diglett–standard
Reference