react-route-dom 사용 시 모달위치로 스크롤 이동 방법

Question

페이지 상단(position fiexed)에 등록이라는 버튼을 클릭하면 모달형태로 팝업창이 출력이 되는 형태 입니다.페이지 하단에서 등록 버튼을 클릭하면 모달이 출력되고 있는 최상단으로 이동시켜고 합니다.https://react-ko.dev/learn/manipulating-the-dom-with-refs위의 공식문서를 참고 및 react-route-dom에서 하위 컴포넌트에 props 넘기는 방법을 검색하여 테스트 해보았습니다.react-route-dom 사용 시 Outlet에 위치하는 컴포넌트에 props를 전달하려면 useOutletContext() 사용해야한다고 하는데공식문서에서는 ref으로 dom 접근 시 하위 컴포넌트로 ref를 넘길때 props로 넘기는데 props를 넘기 방법이 서로 다르다 보니 어떻게 구현해야할지 모르겠습니다.아래 코드는 react-route-dom 방법대로 outlet에 위치하는 하위 컴포넌트에 useOutletContext 사용하여 넘겨주었지만스크롤 이동이 되지 않고 개발자도구에는 Unexpected ref object provided for div. Use either a ref-setter function or React.createRef().같은 에러가 출력됩니다.공식문서에서 코드대로 react-route-dom을 사용하지 않는 형태로 변경하면 가능할 것 같은데react-route-dom과 ref를 함께 사용하면서는 스크롤이동 기능을 구현할수 없는 건지 궁금하여 글을 올리게 됐습니다.참고할만한 자료나 선배님들의 가르침 부탁드립니다.Head.jsx const targetRef = useRef(null); useEffect(() => { targethandler(); }); const targethandler = () => { if (targetRef.current) { targetRef.current.scrollIntoView({ behavior: "smooth" }); } }; const handlerModal = () => {//모달형태로 등록폼 화면에 출력 openModal(

codezzzz · Accepted Answer

const {targetRef} = useOutletContext();

react-route-dom 사용 시 모달위치로 스크롤 이동 방법

1개의 답변

기술 목록