[React]_App.js 설정

일단 이번에 라우터를 급하게 준비해야하는 상황이 있었는데, 생각보다 오래걸려서 미리 올려놓고 앞으로 쓰려고 한다...

//package.json

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.1",
    "react-scripts": "5.0.1",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

해당 설정을 참고하여야 하며,

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

//App.js
import React, { useState } from "react";
import { BrowserRouter as Router, Route, Link, Routes } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
import NotFound from "./components/NotFound";

function App() {
  const [activeTab, setActiveTab] = useState("home");

  return (
    <Router>
      <nav>
        <ul>
          <li className={activeTab === "home" ? "active" : ""}>
            <Link
              onClick={() => setActiveTab("home")}
              to="/"
            >
              Home
            </Link>
          </li>
          <li className={activeTab === "about" ? "active" : ""}>
            <Link
              onClick={() => setActiveTab("about")}
              to="/about"
            >
              About
            </Link>
          </li>
          <li className={activeTab === "contact" ? "active" : ""}>
            <Link
              onClick={() => setActiveTab("contact")}
              to="/contact"
            >
              Contact
            </Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route exact path="/" element={<Home/>} />
        <Route path="/about" element={<About/>} />
        <Route path="/contact" element={<Contact/>} />
        <Route element={<NotFound/>} />
      </Routes>
    </Router>
  );
}

export default App;

이렇게 App.js, index.js 코드를 참고해서 앞으로 프로젝트를 진행하면 좋을 것 같다.