React 질문입니다. App.js 이렇게 작성해도 될까요?

Question

프론트엔드는 React로 하고 있고 백엔드는 Express로 구축하고 있습니다. SSR 프레임워크로 개발할 때는 서버에서 data랑 route 관련해서 다 처리해서 편했는데 CSR은 처음이라 어제 라우팅부터 엄청 삽질했네요.. 제가 이해한 게 맞는지 모르겠습니다.React로 개발할 때 라우팅은 React쪽에서 처리하는게 맞나요? Express 쪽에서는 모든 경로(*)에 대해서 index.html로 접근하도록 했습니다. 정상적으로 동작은 하는데 이게 정성적인건지 모르겠네요 ㅠㅠ컴포넌트 분리 기준을 모르겠습니다. 어제 github로 다른 사람이 React로 프로젝트 한 거 보면서 공부했는데 어떤 사람은 button input 이런 것도 컴포넌트로 만들어서 쓰던데.. 맞나요? Input 컴포넌트로 만들어서 해봤는데 뭔 차이인지 모르겠네요.아래 코드는 App.js입니다. App.js 에서는 라우팅만 처리하고 있습니다.import './App.css'; import { BrowserRouter, Routes, Route} from 'react-router-dom'; import Main from './pages/Main/Main'; import Sub from './pages/Sub/Sub'; import Home from './pages/Home/Home'; import Login from './pages/Login/Login'; const App = () => { return(

}> }> }> }>

); } export default App;

몰랑토끼 · Answer

네 라우팅은 react에서 하시는게 맞아요. ssr하실때도 pages/나 app폴더 아래로 라우팅 잡으시지 않았나요? app.js에서 잡으셔도되고 별도 파일 분리해서 하셔도됩니다. 컴포넌트는 '재사용할수있는 단위'기준으로 만드시면됩니다. input, button은 여러 곳에서 쓰이니 컴포넌트로 하면 편하겠죠? 컴포넌트 폴더 구조에 대한 방식은단순히 ui로 구분할수도관련있는 애들끼리 묶을수도 ex) form/input.js form/textarea.js패턴을 이용할수도 ( 아토믹, 합성컴포넌트등. 패턴끼리도 조합가능 )등등 프로젝트의 코드규모, 성격, 인원구조에 따라 다릅니다.

세브라이드 · Answer

1정상입니다.2컴포넌트 생명주기에 따라 분리okky에서 qna페이지가 없어져도 button은 다른 페이지에서도 쭉 돌려 쓸거니까 분리설계 변경 가능성에 따라 분리리치 에디터는 외부 라이브러리를 쓰니 쉽게 못바꾸지만 답변 쓰기 레이아웃은 ui/ux 바꿀때마다 바꿀 수 있으니 분리

React 질문입니다. App.js 이렇게 작성해도 될까요?

2개의 답변

#component 목록