반응형 개발/React52 리액트에서 스크롤,드래그 둘 다 되는 슬라이더 리액트에서 스크롤,드래그 둘 다 되는 슬라이더 회사에서 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. 부분렌더링 Input 컴포넌트 보통 리액트에서 input에 무언가를 입력할때는 다음과 같이 input 외부에서 state를 선언후에 input에 props로 전달한다. const [state, setState] = useState(""); return ( setState(e.target.value) } /> ) 문제는 depth가 깊어지고 state가 root에 선언되어있다면, 다음과 같이 input에 하나만 입력해도 형제컴포넌트까지 리렌더링되는 현상이 발생한다. 이를 해결하기 위해 Input 내부에서 state관리를 하고, props에는 객체를 내려주는 방식을 회사 동료분이 소개 해 주셨다. // root에서 props로 전달받는 data = [{name:"june"},{name:"seung"}] const A2Component =.. 2023. 3. 1. 이전 1 2 3 4 5 6 7 ··· 13 다음 반응형
