react-tutorial
react-tutorial copied to clipboard
velopert
3. 서브라우트 · GitBook
질문이 있습니다. 탭을 이용해서 동적인 탭 메뉴를 구현하고 싶은데 조건이 있습니다. A, B, C 의 탭이 있다고 가정할 때 다른 A에서 실시간 그래프를 그리고 있고 B의 탭으로 이동했다가 다시 A탭을 눌렀을 때 화면이 새로고침 되는게 아니라 계속 실시간 그래프가 그려지고 있는 것을 보여주고 싶어요. 크롬 브라우저처럼 다른 탭을 이동해도 기존 탭에서 하던 것들이 유지되길 바랍니다.
라우터를 이용하면 화면이 새로 불러와지는거 같은데 방법이 없을까요?
@ShinEunYoung 작은 탭이라면 css의 visibility로 컨트롤하는 방법도 생각해보세요. 혹은 그래프를 그려주는 컴포넌트의 state를 관리해주면, 탭을 전환해도 비슷하게 그래프가 유지는 될 것 같습니다. 그렇지 않고 리얼타임으로 유지해야 한다면, 제 생각에는 서비스워커나 react 컨커런시에서 방법이 있지 않을까 싶은데 구체적인건 해 봐야 알 것 같네요.
서브 라우트는, 라우트 내부의 라우트를 만드는것을 의미 (컴포넌트를 만들어서 그 안에 또 Route 컴포넌트를 렌더링)
특정 라우트 내에 탭 제작 시 서브라우트로 관리하기 링크를 통하여 다른 곳에서 쉽게 진입, 검색엔진 크롤링 시 더욱 다양한 데이터를 수집
React router dom이 v6로 업그레이드 되면서 많이 찾아보는 중입니다. 웬만한 것은 다 최신 문법으로 수정하였지만 다음과 같은 코드는 어떻게 해야할 지 모르겠어서 질문 남깁니다.
<Route path="profiles/*" element={<Profiles />}> <Route path="profiles" element={
여기에서
앗.. div태그를 그대로 썼더니 진짜 댓글에 적용되어버렸네요.. 프로필을 선택해주세요를 감싸고 있는 태그는 div 태그입니다...!
v6에서는 app.js에서 <Route path="profiles/* element={<Profiles />}> 으로 설정해주고
Profiles.js에서
velopert<Route path="/" element={
이런식으로 작성해주면 됩니다.
react router V5 -> V6으로 버전 업 되면서 코드가 제대로 동작을 안해서 찾아서 고쳐보고 올립니다.
Profiles.js
<Routes>
<Route path='/' element='유저를 선택해주세요' />
<Route path=':username' element={<Profile/>} />
</Routes>
Profile.js
import { useParams } from 'react-router-dom';
const Profile = () => {
// V5 -> V6 useParams로 변경
const {username} = useParams();
// 선택 유저 콘솔 출력
console.log(username);
const profile = profileData[username];
if(!profile) {
return <div>선택한 사용자가 없습니다.</div>
}
return (
<div>
<h3>
{username}({profile.name})
</h3>
<p>{profile.description}</p>
</div>
);
};
App.js
import { Routes, Route, Link } from 'react-router-dom';
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/profiles/*' element={<Profiles/>} />
</Routes>
