반응형 개발/React54 useHasScroll.tsx : 컴포넌트의 스크롤바 유무를 boolean으로 리턴 useHasScroll.tsx : 컴포넌트의 스크롤바 유무를 boolean으로 리턴 회사에서 dragSlider.tsx를 만들었다. 이전에 라이브러리를 이용해 만든 dragSlider는 카드를 잡아끌었을때, 스크롤이 움직이지 않는 버그가 있었다. 버그를 해결하면서 만든 dargSlider는 카드를 잡아 끌면 스크롤도 같이 움직이도록 되어 있다. 한편, 슬라이더가 슬라이더임을 눈치 채지 못하고, 화면이 짤린것이 아니냐고 물어보는 VOC가 종종 있다는 제보를 받았다. PM분이 '넘기는 것을 암시하는 흐린 그라데이션'을 넣는것을 제안해주셨고 나와 디자이너분 모두 찬성했다. 그래서 다음과 같이 오른쪽 끝에 흐린 그라데이션(이하 cloudyArea)을 넣는 UI가 만들어졌다. 화면이 충분히 넓어서 slider의 .. 2023. 4. 30. 리액트에서 스크롤,드래그 둘 다 되는 슬라이더 리액트에서 스크롤,드래그 둘 다 되는 슬라이더 회사에서 framer-motion으로 만든 슬라이더가 이상하게 작동했다. 위와 같이 마우스로 카드를 잡아 끌었을때 스크롤은 움직이지 않았다. 드래그와 스크롤의 싱크를 맞추는 게 어려웠다. 고민하다가, 그냥 쌩으로 만들기로 했다. 이번 작업은 DOM의 scroll 이벤트 공부가 많이 되었다. onMouseDown const [dragging, setDragging] = useState(false); const [scrollLeft, setScrollLeft] = useState(0); const handleMouseDownEvent = (e: MouseEvent) => { // 마우스 클릭하면 setDragging(true); if (containerRef.c.. 2023. 4. 26. react18 : flushSync react18 : flushSync React 18에서는 새로 도입된 Concurrent Mode를 통해 여러 상태 업데이트를 동시에 처리하고 렌더링 작업을 인터럽트하여 중요한 작업(ex : 사용자 입력)을 먼저 처리할 수 있다. 이를 통해 웹 어플리케이션의 반응성을 크게 향상시킬 수 있다. 하지만 이 방식은 모든 경우에 적합한 것은 아니다. 예를 들어, 상태 변경 후 즉시 DOM업데이트를 반영해야 하는 경우 이 방식이 문제가 될 수 있다. useEffect를 이용하는 방식도 있지만, useEffect는 핸들러 안에 사용할 수 없는 hook이기 때문에 결국 관심사가 분리되게 된다. react 18에서 신기능으로 나온 flushSync 메소드는 비동기작업을 동기화 하고 강제 리렌더링 시킨다. 이 메서드는 .. 2023. 4. 10. useDeferredValue : 업데이트를 지연시키고 싶을때 사용 작년 7월에 리액트18의 신기술들을 둘러보면서 useDeferredValue를 debounce의 대안으로 사용할 수 있을까 라고 생각하고 글을 썼는데, 지금 보니 아닌 것 같아서 그때에 작성했던 글은 지우고 다시쓴다. useDeferredValue는 값의 업데이트를 지연시키는 것으로, 서버와의 요청 수를 제한하기 위한 debounce와는 조금 다른 내용인 것 같다. (얼마든지 연계하여 이용할 수 있겠지만, 그건 개발자의 실력이고 개념자체는 조금 다른듯) 요약 : useDeferredValue는 최신값보다 늦게 업데이트 되는 지연된 값을 생성하는데 사용 우선 이 글 을 똑같이 따라해보았다. const [text, setText] = useState(""); const deferredValue = useDe.. 2023. 3. 4. 이전 1 2 3 4 5 6 7 ··· 14 다음 반응형
