Visual Studio Code

[React] chapter_07

DEVELOPERS_Ivan ㅣ 2023. 9. 1. 15:19

컴포넌트와 메뉴 url 연결 : 라우팅(Router)
네비게이션 바를 이용한 상단 메뉴 만들기
더보기
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
    <!-- TODO : 부트스트랩 css 삽입 bootstrap css cdn -->
    <link
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
더보기
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
// TODO: 리액트 메뉴 라이브러리
import {BrowserRouter} from "react-router-dom";
 
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
 
// 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();
더보기
.list {
    text-align: left;
    max-width: 750px;
    margin: auto;
  }
 
  .submit-form {
    max-width: 300px;
    margin: auto;
  }
 
  .edit-form {
    max-width: 300px;
    margin: auto;
  }
더보기
// TODO : 자식 컴포넌트 3페이지 AddDept.js
// TODO :

// TODO : React 컴포넌트
// 단축키 : rfce
import React, { useState } from "react";

// TODO : css 파일 가져오기(import)
import "../assets/chapter15.css";

function AddDept() {
  // TODO : 변수 정의 (바인딩 변수 : useState())
  // 임시 객체
  const initialDept = {
    dname: "", // 부서명
    loc: "", // 부서위치
  };

  // TODO : 바인딩 변수
  // 사용법 : let[변수명, set변수명] = useState(초기값);
  let [dept, setDept] = useState(initialDept); // input 의 value :부서명/부서위치

  // TODO : 함수 정의
  // TODO : 역바인딩 함수 : onChange 의 함수와 바인딩(개발자 직접 코딩)
  // TODO: 기억 안나면 .../005/pages/A_SignUp.js 참고해서 양식 복사해서 변수명만 고쳐 사용
  // nfn : 화살표 함수 단축키
  const handleChange = (event) => {
    // 현재 화면 입력값 : event.target.value
    let attrValue = event.target.value;
    // 현재 화면 태그의 이름 :
    let attrName = event.target.name; // 태그의 이름 === 객체의 속성명
    // 스프레드 연산자로 객체 속성 수정
    setDept({ ...dept, [attrName]: attrValue });
  };

  //  클릭 이벤트 함수 : saveDept()
  // nfn : 화살표 단축키
  const saveDept = () => {
    alert("저장되었습니다.");
  };

  return (
    <div className="submit-form">
      <div>
        <div className="form-group mb-3">
          <label htmlFor="dname">Dname</label>
          <input
            type="text"
            className="form-control"
            id="dname"
            required
            value={dept.dname}
            onChange={handleChange}
            name="dname"
          />
        </div>

        <div className="form-group mb-3">
          <label htmlFor="loc">Loc</label>
          <input
            type="text"
            className="form-control"
            id="loc"
            required
            value={dept.loc}
            onChange={handleChange}
            name="loc"
          />
        </div>

        <button onClick={saveDept} className="btn btn-success">
          Submit
        </button>
      </div>
    </div>
  );
}

export default AddDept;

Home
컴포넌트와 메뉴 url 연결 : 라우팅(Router)
네비게이션 바를 이용한 상단 메뉴 만들기
첫화면 url -> <Home /> 라우팅

/ : 첫화면 home url은 슬러시 사용이 관례 
<Routes>
<Route path="/" element={<Home />} />
</Routes>

더보기
// TODO : 자식 컴포넌트 1페이지 Home.js
// TODO : 컴포넌트와 메뉴 URL을 연결하는 리액트 라우터(React Router)


// TODO : React 컴포넌트
// 단축키 : rfce
import React from "react";

function Home() {
  return <div>안녕하세요, 부서관리 시스템에 오신것을 환영합니다.</div>;
}

export default Home;

Dept
네비게이션 바를 이용한 Dept 페이지
메뉴 URL 연결된 컴포넌트 부트스트랩 반복문 출력하기
dept.map() 함수 실행
더보기
// TODO : 자식 컴포넌트 2페이지 Dept.js
// TODO : 메뉴 URL 연결된 컴포넌트 부트스트랩 반복문 출력하기

// TODO : React 컴포넌트
import React, { useState } from "react";

function Dept() {
  // TODO : 변수 정의
  // nfn : 화살표함수 단축키
  // TODO: 객체배열 === JSON 데이터(문서)
  const initaiDept = [
    {
      no: "1",
      dname: "Sales",
    },
    {
      no: "2",
      dname: "Marketing",
    },
    {
      no: "3",
      dname: "Research",
    },
  ];
  // TODO : 함수 정의
  // 바인딩 변수
  // 사용법 : let [변수명, set변수명] = useState(초기값);
  let [dept, setDept] = useState(initaiDept);

  return (
    <div className="container mt-5">
      {/* TODO: dept.map() 함수 실행 : 목록태그(ul-li(반복) : 부트스트랩) */}
      <h4>Dept List</h4>

      <ul class="list-group mt-3">
        {/* TODO: dept.map(()=>(<li>문자열</li>)) */}
        {dept.map((value, index) => (
          <li class="list-group-item" key={index}>
            {value.dname}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Dept;

AddDept
네비게이션 바를 이용한 Add Dept 페이지
메뉴 URL 연결된 컴포넌트 입력 후 저장 버튼 누르면 팝업 창 띄우기
현재 화면 입력값 스프레드 연산자로 객체 속성 수정
역바인딩 함수 : onChange 의 함수와 바인딩(개발자 직접 코딩)
더보기
// TODO : 자식 컴포넌트 3페이지 AddDept.js
// TODO :

// TODO : React 컴포넌트
// 단축키 : rfce
import React, { useState } from "react";

// TODO : css 파일 가져오기(import)
import "../assets/chapter15.css";

function AddDept() {
  // TODO : 변수 정의 (바인딩 변수 : useState())
  // 임시 객체
  const initialDept = {
    dname: "", // 부서명
    loc: "", // 부서위치
  };

  // TODO : 바인딩 변수
  // 사용법 : let[변수명, set변수명] = useState(초기값);
  let [dept, setDept] = useState(initialDept); // input 의 value :부서명/부서위치

  // TODO : 함수 정의
  // TODO : 역바인딩 함수 : onChange 의 함수와 바인딩(개발자 직접 코딩)
  // TODO: 기억 안나면 .../005/pages/A_SignUp.js 참고해서 양식 복사해서 변수명만 고쳐 사용
  // nfn : 화살표 함수 단축키
  const handleChange = (event) => {
    // 현재 화면 입력값 : event.target.value
    let attrValue = event.target.value;
    // 현재 화면 태그의 이름 :
    let attrName = event.target.name; // 태그의 이름 === 객체의 속성명
    // 스프레드 연산자로 객체 속성 수정
    setDept({ ...dept, [attrName]: attrValue });
  };

  //  클릭 이벤트 함수 : saveDept()
  // nfn : 화살표 단축키
  const saveDept = () => {
    alert("저장되었습니다.");
  };

  return (
    <div className="submit-form">
      <div>
        <div className="form-group mb-3">
          <label htmlFor="dname">Dname</label>
          <input
            type="text"
            className="form-control"
            id="dname"
            required
            value={dept.dname}
            onChange={handleChange}
            name="dname"
          />
        </div>

        <div className="form-group mb-3">
          <label htmlFor="loc">Loc</label>
          <input
            type="text"
            className="form-control"
            id="loc"
            required
            value={dept.loc}
            onChange={handleChange}
            name="loc"
          />
        </div>

        <button onClick={saveDept} className="btn btn-success">
          Submit
        </button>
      </div>
    </div>
  );
}

export default AddDept;

Emp, AddEmp 페이지 연습
메뉴 URL 연결된 컴포넌트 부트스트랩 반복문 출력하기
현재 화면 입력값 스프레드 연산자로 객체 속성 수정
역바인딩 함수 : onChange 의 함수와 바인딩(개발자 직접 코딩)
*  입력 폼 type required 유효성 검사 숫자로 입력 코드 사용
더보기
// TODO : 자식 컴포넌트 4페이지 Emp.js
// TODO : 메뉴 URL 연결된 컴포넌트  부트스트랩 반복문 출력하기

// TODO : 연습문제
// 화면에 부트스트랩 목록 태그를 이용해서 화면에 반복문으로 출력하세요

// TODO : React 컴포넌트
// 단축키 : rfce
import React, { useState } from "react";

function Emp() {
  // TODO : 변수 정의
  // nfn : 화살표함수 단축키
  // TODO: 객체배열 === JSON 데이터(문서)
  const initialEmps = [
    {
      eno: 1,
      ename: "Scott",
    },
    {
      eno: 2,
      ename: "James",
    },
    {
      eno: 3,
      ename: "Kim",
    },
  ];

  // TODO : 함수 정의
  let [emp, setEmp] = useState(initialEmps);

  return (
    <div className="container mt-5">
      {/* TODO: emp.map() 함수 실행 : 목록태그(ul-li(반복) : 부트스트랩) */}
      <h4>emp List</h4>

      <ul class="list-group mt-3">
        {/* TODO: emp.map(()=>(<li>문자열</li>)) */}
        {emp.map((value, index) => (
          <li class="list-group-item" key={index}>
            {value.ename}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Emp;

 

더보기
// TODO : 자식 컴포넌트 5페이지 AddEmp.js
// TODO :

// TODO : React 컴포넌트
// 단축키 : rfce
import React, { useState } from "react";

// TODO : css 파일 가져오기(import)
import "../assets/chapter15.css";

function AddEmp() {
  // TODO : 변수 정의 (바인딩 변수 : useState())
  // 임시 객체 정의
  const initialEmp = {
    ename: "", //  사원명
    Job: "", // 직위
    manager: "", // 관리자 사번
    hiredate: "", // 입사일
    salary: "", // 월급
    commission: "", // 인센티브(보너스, 상여금)
    dno: "", // 부서번호
  };

  // 바인딩 변수
  // 사용법 : let[변수명, set변수명] = useState(초기값);
  let [emp, setEmp] = useState(initialEmp); // input 의 value

  // TODO : 함수 정의
  // onChange : 역바인딩 함수(직접 코딩) : handleChange()
  // nfn : 화살표 함수 단축키
  const handleChange = (event) => {
    // 현재 화면 입력값  : event.target.value
    let attrValue = event.target.value;
    // 현재 화면 태그의 이름 :
    let attrName = event.target.name; // 태그의 이름 === 객체의 속성명
    // 스프레드 연산자로 객체 속성 수정
    setEmp({ ...emp, [attrName]: attrValue });
  };

  // 클릭 이벤트 함수 : saveEmp()
  // nfn : 화살표 단축키
  const saveEmp = () => {
    alert("저장되었습니다.");
  };

  return (
    <div className="submit-form">
      {/* ename 시작 */}
      <div className="form-group">
        <label htmlFor="ename">Ename</label>
        <input
          type="text"
          className="form-control"
          id="ename"
          required
          value={emp.ename}
          onChange={handleChange}
          name="ename"
        />
      </div>
      {/* ename 끝 */}

      {/* Job 시작 */}
      <div className="form-group">
        <label htmlFor="job">Job</label>
        <input
          type="text"
          className="form-control"
          id="job"
          required
          value={emp.job}
          onChange={handleChange}
          name="job"
        />
      </div>
      {/* Job 끝 */}

      {/* manager 시작 */}
      <div className="form-group">
        <label htmlFor="manager">manager</label>
        <input
          //TODO: type required 유효성 검사 숫자로입력됨
          type="number"
          className="form-control"
          id="manager"
          required
          value={emp.manager}
          onChange={handleChange}
          name="manager"
        />
      </div>
      {/* manager 끝 */}

      {/* hiredate 시작 */}
      <div className="form-group">
        <label htmlFor="hiredate">hiredate</label>
        <input
          type="number"
          className="form-control"
          id="hiredate"
          required
          value={emp.hiredate}
          onChange={handleChange}
          name="hiredate"
        />
      </div>
      {/* hiredate 끝 */}

      {/* salary 시작 */}
      <div className="form-group">
        <label htmlFor="salary">salary</label>
        <input
          type="number"
          className="form-control"
          id="salary"
          required
          value={emp.salary}
          onChange={handleChange}
          name="salary"
        />
      </div>
      {/* salary 끝 */}

      {/* commission 시작 */}
      <div className="form-group">
        <label htmlFor="commission">commission</label>
        <input
          type="number"
          className="form-control"
          id="commission"
          required
          value={emp.commission}
          onChange={handleChange}
          name="commission"
        />
      </div>
      {/* commission 끝 */}

      {/* dno 시작 */}
      <div className="form-group">
        <label htmlFor="dno">dno</label>
        <input
          type="number"
          className="form-control"
          id="dno"
          required
          value={emp.dno}
          onChange={handleChange}
          name="dno"
        />
      </div>
      {/* dno 끝 */}

      {/* saveEmp 버튼 시작 */}
      <button onClick={saveEmp} className="btn btn-success mt-3">
        Submit
      </button>
      {/* saveEmp 버튼 끝 */}
    </div>
  );
}

export default AddEmp;

type required 유효성 검사 숫자로입력됨

저작자표시 비영리 동일조건

'Visual Studio Code' 카테고리의 다른 글

[React] chapter_09  (0) 2023.09.01
[React] chapter_08  (0) 2023.09.01
[React] chapter_06  (0) 2023.08.31
[React] chapter_05  (0) 2023.08.31
[React] chapter_04  (0) 2023.08.30
Visual Studio Code 다른글

티스토리툴바