보통,

컴포넌트 랜더함수는 function () {} 이렇게 주로 쓰고,

컴포넌트 내부에 쓰는 기능을 정의하는 일반함수는 () ⇒ {} , 주로 화살표 함수로 쓰임

** 단일 컴포넌트는 상관없지만 여러 컴포넌트를 사용하기 위해서는

<> 프래그먼트 비어있는 태그로 감싸주거나 다른 태그(예: <div></div> )로 감싸줘야 합니다

Route

BrowserRouter , Routes , Route

• <BrowserRouter></BrowserRouter> : 덮개…?!
• <Routes></Routes> : <Route /> 여러개 있을때 감싸주는 역할
• <Route path={"도메인주소 뒤에 붙는 정하고 싶은 주소"} element={컴포넌트} />

예시)

src>routes>routing.js

import {BrowserRouter, Routes, Route} from 'react-router-dom';
import HomePage from '../pages/Home';
import SignInPage from '../pages/Signin';
import TodoPage from '../pages/Todo';

function Routing () {
  return <BrowserRouter>
    <Routes>
      <Route path={"/"} element={<HomePage/>}/>
      <Route path={"/todo"} element={<SignInPage />}/>
      <Route path={"/signin"} element={<TodoPage />}/>
    </Routes>
  </BrowserRouter>
}
export default Routing;

src>App.js

import Routing from "./routes/routing";

function App() {

  return <Routing />
}

export default App;