React 리액트 (route 활용)

 

 

새로 리액트 파일을 만들어보겠습니다.

 

 

 

 

 

 

 

 

VSCode에서 터미널을 실행한 뒤에 router-dom을 설치해줍니다.

PS D:\dev\ReactStudy\my-app2> npm install react-router-dom@6

 

 

 

router 설치가 완료되었다면, index.js에 들어가서 App을 BrowerRouter을 씌어 감싸줍니다.

 

 

 

App.js

import { Link, Route, Routes } from 'react-router-dom';
import './App.css';
import Ex1 from './pages/Ex1';

function App() {
  return (
    <div className="App">
      <nav>
        <Link to="/">메뉴 1</Link>&nbsp;&nbsp;&nbsp;
        {/* <Link to="/ex2">메뉴 2</Link> */}
      </nav>

      <Routes>
        <Route path="/" element={<Ex1 />} />
        {/* <Route path="/ex2" element={<Ex2 />} /> */}
      </Routes>

    </div>
  );
}

export default App;

 

 

 

Ex1.js

import React, { useState } from "react";

const Ex1 = () => {
  const [txt, setTxt] = useState("");

  function setValue(e) {
    // const setValue = (e) => {}
    // 입력값을 가져와서 setTxt 통해서 txt 변수에 넣겠다. -> Re Rendering
    setTxt(e.target.value);
    console.log(txt);
  }

  return (
    <div>
      <p>Ex1화면</p>
      <input type="text" value={txt} onChange={setValue} />
      <br />
      <p>{txt}</p>
    </div>
  );
};

export default Ex1;

 

 

 

Ex2.js

import React, { useState } from "react";

const Ex2 = () => {
  const [vo, setVo] = useState({
    name: "",
    email: "",
    tel: "",
  });

  //const {name, email, tel} = vo;
  function setValue(e) {
    // const setValue = (e) => {
    let value = e.target.value;
    let id = e.target.id;
    setVo({
      ...vo, // 스프레이드 속성이라 한다. vo 를 하나 복사해 놓는 개념
      [id]: value,
    });
  }

  return (
    <div>
      <div>
        <label>이름</label>
        <input type="text" id="name" value={vo.name} onChange={setValue} />
      </div>
      <div>
        <label>이메일</label>
        <input type="email" id="email" value={vo.email} onChange={setValue} />
      </div>
      <div>
        <label>전화번호</label>
        <input type="tel" id="tel" value={vo.tel} onChange={setValue} />
      </div>
      <p> 이름: {vo.name}</p>
      <p> 이메일: {vo.email}</p>
      <p> 전화번호: {vo.tel}</p>
    </div>
  );
};

export default Ex2;