react6 next.js app라우터에서 useId 사용시 발생하는 hydration 에러 Hydration mismatch when using the useId hook, when using the app router https://github.com/vercel/next.js/issues/53110 위 게시물에 자세하게 나와있었다. 요약하자면 next에 여러 PR이 합쳐지면서 ReactDevOverlay가 여러 개 생겼고, 서로 다른 React 트리를 생성하여 useId 차이가 발생하고 있다는 것이었다. next를 최신버전으로 업그레이드하자 위 에러로그는 더 이상 발생하지 않았다. yarn berry를 사용하면서 기존 yarn classic과 달라진 명령어가 매번 헷갈렸는데 아래 링크에 자세하게 나와있었다. https://yarnpkg.com/cli/up 특정 dependencies를 업그.. 2023. 9. 29. setState의 효율적인 사용 방법과 React-Query의 initialData, placeholderData useState const [userInfo, setUserInfo] = useState() const onChangeUsername = (e: React.ChangeEvent) => { setUserInfo({ ...userInfo, username: e.target.value }); }; userInfo가 속성이 많은 큰 객체인 경우 스프레드 연산자를 사용하면 전체 객체의 얕은 복사본을 만들 수 있으며 이는 메모리 사용량 및 처리 시간 측면에서 성능에 악영향을 끼칠 수 있다. 따라서 다음과 같이 사용하는 것이 좋다. const onChangeUsername = (e: React.ChangeEvent) => { setUserInfo((prevUserInfo) => ({ ...prevUserInfo, u.. 2023. 8. 2. 리액트에서 터치 이벤트로 스와이프 구현 서비스에 휠 이벤트를 이용해 데이터를 바꿔주는 로직이 있었다 데스크탑에서는 wheel 이벤트를 사용하고, 모바일에서는 touch 이벤트를 사용했는데, 그중 onTouchMove에 이벤트 핸들러를 등록해 사용했다. 그리고 event객체에서 touches[0].clientY와 changedTouches[0].clientY를 받아 둘을 비교한 결과에 따라 위로 스와이프 했는지, 아래로 스와이프 했는지 판단했다. //터치의 시작이 끝보다 위면 up, 아래면 down if (e.touches[0].clientY e.changedTouches[0].clientY) { setDra.. 2023. 7. 17. 모바일에서 브라우저 주소창을 고려한 css height 설정 - svh 서비스 이용 시 위아래 스크롤이 되지 않도록 하고 싶었다. 하지만 별이 떠다니는 애니메이션이 상당한 height를 차지하고 있었다. 이것들을 정리하기엔 쉽지 않다고 생각하여 레이아웃의 크기를 viewport에 맞추기로 결정했다. height: calc(100vh - 55px); // 55px은 헤더의 높이 위 코드를 적용한 후 데스크탑에서는 더 이상 스크롤이 생기지 않았지만, IOS 사파리에서 동일한 증상이 반복되었다. (네이버 브라우저에서 정상 작동하는 것을 확인하고, 다른 브라우저를 확인해보지는 않았다.) 하단의 주소창 때문에 의도대로 동작하지 않고 있다. 주소창을 고려한 높이 설정을 위해 구글링하다 발견한 아래 방법도 사용해 봤지만 해결되지 않았다. const vh = window.innerHeig.. 2023. 7. 11. Recoil을 알아보자 상태 관리 라이브러리의 등장 배경 다음과 같은 상황을 가정해 보자 // src/App.tsx import React from 'react'; import Top from './Top'; function App() { return ; } export default App; App.tsx에서 Top.tsx를 랜더링 하고 // src/Top.tsx // Middle 컴포넌트를 자식으로 가지고 BottomText를 출력해야하는 컴포넌트 import React from 'react'; import Middle from './Middle'; function Top() { return ( Top : {BottomText} ); } export default Top; Top.tsx에서는 Middle.tsx를 랜더링 한.. 2022. 4. 28. 이벤트 버블링(Event bubbling) 각 form, div, p 태그의 영역을 클릭하면 alert를 실행하는 코드를 작성하였습니다. 1. form 태그 영역(red)을 클릭할 경우 2. div 태그 영역(blue)을 클릭할 경우 3. p 태그 영역(green)을 클릭할 경우 위에서 자식 태그인 div태그를 클릭하면 div의 alert뿐만 아니라 부모 태그인 form의 alert까지 실행되는 것을 확인할 수 있었습니다. 따라서 p 태그를 클릭할 경우 p의 alert 발생 후 div, form 태그 순으로 실행될 것입니다. 이와 같이 자손 태그의 이벤트가 부모 태그에 전파되는 현상을 이벤트 버블링이라고 합니다. 그렇다면 이러한 현상을 막을 수 있는 방법은 무엇이 있을까요? stopPropagation event를 매개변수로 받은 후 event객.. 2022. 4. 14. 이전 1 다음
