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..

[React] 중첩 라우팅 설정후 URL이 변경 되었음에도 페이지에 나타나지 않을때

친구들과 React를 사용해 토이프로젝트를 제작하고 있습니다. 확실히 Vue보다는 입문할때 조금 어렵다는 느낌을 많이 받았고, react-router를 사용해 중첩 라우팅을 할때에 페이지에 제가 원하는 정보가 나오지 않아 조금 헤맷던 부분이 있어 정리하려고합니다. 다음 처럼 설정을 해주고 /community-list/1이라고 URl이 변경되어도 화면상에 변화가 일어나지 않았습니다. 그 이유를 찾아보니 중첩라우팅을 할때에 부모의 라우트 컴포넌트 내에 자식 컴포넌트의 위치를 지정해줘야 한다고 합니다. 그래서 부모의 컴포넌트 내에 이라는 자식 컴포넌트의 위치를 지정해주니 제가 원하는 방향대로 잘 나왔습니다. 참고 사이트 https://velog.io/@reasonz/2022.07.14-리액트-라우터-중첩-라우..