react

[React] styled components 사용시 input focus를 잃어버리는 이슈

드로잉윗유를 개발하면서 styled-components를 사용하고 있습니다. 그런데 input onChange()가 일어나면 focus가 아웃되는 상황이 생겨 해결 방법을 기록합니다. 컴포넌트 구조 현재 저의 프로젝트는 atom design패턴을 적용하여 컴포넌트를 개발하고 있습니다. Atom -> button, Input Molecule -> FormInputGroup Organism -> NewRoomModal 의 구조로 되어있습니다. //Modal.jsx import styled from "styled-components"; import Icons from "@/components/Atom/Icons/Icons.jsx"; const Modal = ({children,clickClose}) => { ..

[React] 페이지 이동시 스크롤 상단으로

React를 활용해서 커뮤니티 앱을 제작하던 중에 콘텐츠 부분의 내용이 많아져서 스크롤을 하고 다른 페이지로 넘어가면 스크롤 정보가 남아있어서 그런지 상단으로 가지 않았습니다. 그래서 이 부분을 해결하고 싶었고, 해결 방법과 부딪혔던 경험을 작성해 보려고 합니다. 현재 커뮤니티 앱은 모바일 퍼스트로 제작하고 있습니다. 위와 같이 커뮤니티를 눌러도 상단으로 가지 않아 페이지가 이동된 것 인지 확인이 어려웠습니다. 그래서 검색을 해보니 ScrollToTop 컴포넌트를 제작해서 Index.js에 추가해주면 된다는 해결법을 보았습니다. // ScrollToTop.js 파일 제작 import { useEffect } from "react"; import { useLocation } from "react-route..