react router dom의 routes 사용방식

Question

react router dom에서 page를 만들 때 만드는 방식에 대해 질문이 있습니다.저는 routes 폴더 안에 페이지 파일들을 넣고 페이지 코드에서 컴포넌트를 불러오는 방식을 썼습니다. 컴포넌트만 불러오는 방식이 틀린건가요? 이때, 컴포넌트는 재사용되지 않았습니다.튜토리얼을 보니 페이지 코드 자체에 코드를 작성하더라구요. 재사용될 경우에만 컴포넌트로 만들고, 아니라면 코드가 길더라도 routes에 써서 무분별한 컴포넌트 생성을 지양해야하는지 궁금합니다.예시코드// src/routes/CreateProfile.ts import ProfileForm from "../components/user/ProfileForm"; export default function CreateProfile() { return (

); } App.ts 내에서 createBrowserRouter를 사용할 때 routes 폴더 내의 파일이 아닌 component를 불러와도 되는지 궁금합니다.chatgpt는 용도에 따라 가능하다고는 하는데 저는 routes에서도 불러오고 component에서도 불러오는 식으로 혼합해서 사용중이라 어떤게 올바른 방법인지 모르겠습니다.예시코드//App.ts import Join from "./components/Join.ts"; import CreateProfile from "./routes/CreateProfile.ts"; const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "/create-profile", element: , // 컴포넌트 }, { path: "/register", element: , // 라우트 },추가적으로 한 번만 불러와지는 컴포넌트라면 컴포넌트로 생성해서는 안되는건지 궁금합니다.딱 떨어지게 정리되는 것을 선호해서 재사용되지 않더라도 웬만하면 컴포넌트로 만들어왔었는데 그렇게하면 일반적으로 좋지 않은 걸까요?

frontend · Answer

어음.. 질문을 정확하게 이해한지는 모르겠으나 페이지 자체도 컴포넌트로 볼 수 있고 버튼이나 리스트도 컴포넌트로 볼 수 있다고 생각합니다 규모의 차이겠죠재사용이 가능해야만 컴포넌트냐는 아니지 싶고 맨아래 주석에 join은 라우트, createprofile은 컴포넌트로 적어주셨는데 의미를 모르겠습니다layout에 헤더나 푸터 등등 기본적인 프레임을 짜놓고 하위에 컴포넌트만 집어넣어도 상관은 없을텐데 디자인 페이지가 모든 동일한 프레임을 가지고 있나요?혹은 디자인이 확정나서 더 바뀔 여지가 없나요? 저는 layout에 디폴트로 프레임 잡고 페이지 내부에 프레임을 하나 더 잡습니다. 그리고 그 프레임을 재사용하는 편입니다.

react router dom의 routes 사용방식

1개의 답변

Q&A 목록