React-spring으로 멋진 측면 서랍을 만드는 방법

직장에서 최근 사이드 서랍을 만들어야 했고 특정 제약으로 인해 react-spring을 사용하여 만들어야 했습니다.

요구 사항

측면 서랍을 전환하는 버튼입니다.

두 번째로 흐리게 표시된 오버레이와 측면 서랍을 애니메이션합니다.

마지막으로 오버레이를 클릭하면 오버레이와 측면 서랍이 숨겨집니다.

그것을 분해

요구 사항을 고려하여 먼저 단계로 분류해야 한다고 생각했습니다.

표시 버튼

버튼 클릭 시 오버레이 애니메이션 적용

애니메이트 측면 서랍

오버레이 클릭 시 닫기

코드 따라

무엇보다도 on-click 이벤트를 처리할 버튼을 만들어 봅시다. 클릭 이벤트는 측면 서랍의 상태를 전환해야 합니다.

export default function App() {
  const [show, setShow] = useState();
  return (
    <div className="App">
      <button onClick={() => setShow((prevState) => !prevState)}>
        Click me
      </button>
    </div>
  );
}

충분히 쉽습니다. 이제 우리가 방금 생성한 state에 react-spring 연결을 시작하겠습니다. 먼저 애니메이션이 어떻게 작동할지 생각하면서 오버레이를 표시하고 동시에 측면 서랍을 밀어내고 싶습니다. 사이드 드로어 내부의 내용물은 그다지 중요하지 않지만 전환을 유동적으로 사용하고 상태 관리 오류를 방지하기 위해 useTransitition을 사용하겠습니다.

useTransition은 라이프사이클을 다루는 작업을 위해 특별히 react-spring에서 제공하는 후크입니다!

  const transitions = useTransition(show, null, {
    from: { position: "fixed", opacity: 0, width: 0 },
    enter: { opacity: 1, width: 320 },
    leave: { opacity: 0, width: 0 }
  });```



Now let’s break down the hook itself. We are evaluating the show state we had set earlier and are declaring two styles to adjust: the opacity of the overlay and the width of the side drawer.

### The Overlay

First, let’s code up the overlay; all we have to do is display a dimmed div.



```js
 <div className="App">
      <button onClick={() => setShow((prevState) => !prevState)}>
        Click me
      </button>
      {transitions?.map(
        ({ item, key, props }) =>
          item && (
            <animated.div
              key={key}
              style={{ opacity: props.opacity }}
              className="overlay"
            />
          )
      )}
    </div>

전환을 매핑해야 합니다. 핵심은 반응이 배열의 다른 항목을 구별하는 것입니다. 지금은 오버레이에만 관심이 있기 때문에 이전 후크에서 선언한 불투명도를 전달할 것입니다.

사이드 서랍

이제 내부 서랍도 애니메이션으로 만들어 보겠습니다.

<div className="App">
      <button onClick={() => setShow((prevState) => !prevState)}>
        Click me
      </button>
      {transitions?.map(
        ({ item, key, props }) =>
          item && (
            <animated.div
              key={key}
              style={{ opacity: props.opacity }}
              className="overlay"
            >
              <animated.div style={{ width: props.width }} className="drawer">
               Hey look it's a side drawer!
              </animated.div>
            </animated.div>
          )
      )}
    </div>

오버레이와 마찬가지로 애니메이션 div를 만들고 useTransition에서 너비를 전달합니다.



남은 일은 우수한 사용자 경험을 위해 오버레이를 클릭할 때 오버레이를 닫는 것입니다.

<animated.div style={{ width: props.width }} className="drawer">
                Hey look it's a side drawer!
</animated.div>
<div className="fill" onClick={() => setShow(false)} />

측면 서랍 div 바로 옆에 클릭 이벤트를 처리하는 div를 배치합니다.

이것으로 끝났습니다!

코드의 작업 예는 다음과 같습니다.



읽어 주셔서 감사합니다. 이 글에서 뭔가를 배웠기를 바랍니다. 측면 서랍을 구현하는 데 선호하는 방법이 있습니까?

2021년 7월 23일 https://relatablecode.com에서 원래 게시되었습니다.