오늘의 react

1. import / export

• 코드가 너무 길어서 src에 js파일을 만들고 나서 그 데이터를 export하는법
  • 한 개 있으면
    • export default 변수명
  • 여러개 하려면
    • export { 변수1, 변수 2}
• import 하는법
  • 한 개 가져오려면
    • import 변수명 from 파일 위치
  • 여러개 가져오려면
    • import { 변수1, 변수 2} from 파일 위치
    • 주의할 점 변수 1개를 import하면 작명 ok, 그러나 2개 이상 즉, 중괄호를 이용해서 가져오는 경우는 작명 불가

// 한 개 import
import bg from "./img/bg.png";
// 한 개이상 import
import { Navbar, Container, Nav } from 'react-bootstrap';

// 한 개 export
export default App;

// 한 개이상 export
export default {App, Detail};

 

2. 리액트 라우터(셋팅과 기본 라우팅)

• 페이지 나누는 법 (리액트 미사용)
  • html 파일 만들어서 상세페이지 내용 채운다.
  • 누가 /detail로 접속하면 html 파일 보내줌
• 페이지 나누는 법 (리액트 사용)
  • 컴포넌트 만들어서 상세페이지내용 채움
  • 누가 /detail 접속하면 그 컴포넌트 보여줌
  • React-router-dom 라이브러리 쓰면 그런거 쉽게 만들 수 있다.
  • npm install react-router-dom@6

//경로 앞에 ./가 안 붙으면 대부분 설치한 라이브러리
import { BroswserRouter } from "react-router-dom"
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

// App.js
import { Routes, Route, Link } from "react-router-dom";

function App() {
  <Routes>
    <Route />
  </Routes>
  
}

• 라우팅: 웹 애플리케이션에서 사용자가 다른 페이지나 섹션을 이동할 때 페이지 전환을 처리하는 방법
• Routes: Routes 컴포넌트는 라우팅을 정의하고 관리하는 데 사용된다. Route 컴포넌트 내에 여러 개의 Route 컴포넌트를 포함할 수 있으며 애플리케이션의 주요 라우팅 로직을 정의하는곳
• Route: 개별적인 라우트를 정의하는데 사용된다. Route컴포넌트는 특정 URL패턴과 연결되어 있는 컴포넌트를 지정한다.
• Link : 페이지 이동버튼