[React] chapter_08

// TODO : 부모 컴포넌트 메인 : App.js

// TODO : App.css import (기본 : 중앙정렬)

import "./App.css";

// TODO : 자식 컴포넌트 가져오기(import)

import Home from "./pages/Home";

function App() {

  // TODO : 변수/함수를 정의하는 부분

  // TODO : 화면에 보이는 부분 : return 안에 있는 html 태그 화면에 보임

  return (

    <div className="App">

      {/* TODO: 컴포넌트와 메뉴 url 연결 : 라우팅(Router) */}

      <Home />

    </div>

  );

}

export default App;

---

메뉴 라이브러리 설치

# 메뉴 라이브러리 설치(오픈소스, MIT 라이센스) - npm i react-router-dom
# 벡엔드 통신 라이브러리 설치(오픈소스, MIT 라이센스)

- npm i axios # 부트스트랩 cdn : public/index.html 에 추가

# 리액트 기본 폴더 구조
- assets : 이미지 , css , 등
- components : 공통 컴포넌트 들 관리(Header.js, Footer.js 등)
- pages : 일반 페이지 컴포넌트 들 (Dept.js, Emp.js 등)
- services : axios 공통 함수들 정의 또는 다른 공통 js 함수들
- utils : 통신 라이브러리 관련 파일(http-common.js 등)

 

index.js
npm i react-router-dom

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();

 

통신 라이브러리 설치 : AXIOS
리액트 //   AXIOS 이용하여 : HTML (머리말= 고정) - (본문 = ※교체로 성능 증가※) - (꼬리말=고정)
통합 라이브러리 설치 방법 터미널 창 " npm install axios  " 입력

npm install axios 입력 시 라이브러리 설치가 되고 package.json 파일에 axios 확인이 가능함

가짜 백엔드 생성하기

01_axios 폴더 생성하여 기존 생성된 폴더 및 파일 넣고

02_json_server 폴더 가짜 백엔드 생성

vscode 재실행 후 터미널에서

npm i -g json-server 라이브러리 설치

npm start 입력 후 호스팅 주소 확인 http://localhost:8000하여 수동으로 웹에 검색하여 준비 확인

가짜 백엔드에 주소 데이터 접근하는 방법

src 폴더에 http-common.js 파일 생성하여 1) 통신 라이브러리 추가 2) 기본 주소 설정 : 가짜 백엔드(http://localhost:8000) 설정해 준다.

// TODO : http-common.js

// TODO : 가짜 백엔드에 주소 데이터 접근하는 방법

// 백엔스 기본 url 주소 설정(axios 사용)

// 가짜 백엔드(json-sver) : http://localhost:8000

// 자원(resource) url : /dept

// 사용 예) http://localhost:8000/dept

// 이 파일에서는 기본주소만 설정하고 : http://localhost:8000

// 다른 파일에서 추가 url 설정 : /dept

// 1) 통신 라이브러리 추가 : import

import axios from "axios";

// 2) 기본 주소 설정 : 가짜 백엔드(http://localhost:8000)

export default axios.create({

  baseURL: "http://localhost:8000", // 기본주소

  headers: {

    "Content-Type": "application/json", // 통신에 사용할 문서종류(json)

  },

});

---

통신 라이브러리 설치 후 백엔드 데이터 받아오기
json_server 백엔드 데이터
db.json * npm start
Home.js * npm start

{

  "dept": [

    {

      "id": 1,

      "dname": "부서명",

      "loc": "위치"

    },

    {

      "id": 2,

      "dname": "부서명 2",

      "loc": "위치 2"

    },

    {

      "id": 3,

      "dname": "부서명 3",

      "loc": "위치 3"

    }

  ]

}

 

// TODO : 자식 컴포넌트 1페이지 Home.js

//      : 컴포넌트와 메뉴 URL을 연결하는 리액트 라우터(React Router)

// TODO : 통신 라이브러리 설치 후 백엔드 데이터 받아오기

// TODO : React 컴포넌트

// 단축키 : rfce

import React, { useEffect, useState } from "react";

// 통신 라이브러리 설정파일 : http-common.js(프론트 - 백엔드 연결)

import http from "../http-common.js";

function Home() {

  // TODO : 변수정의 (바인딩 변수 : useState())

  let [dept, setDept] = useState([]); // 백엔드 전송받을 객체배열을 담을 변수

  // TODO : 함수 정의

  // TODO: axios 함수를 이용해서 백엔드 데이터를 받아오기 : promise (.then().catch())

  //                                                 http://localhost:8000/dept

  //                                                  추가url : /dept

  // 기본주소 : http://localhost:8000, 추가url : /dept

  // nfn : 화살표 함수 단축키

  const retrieveContent = () => {

    http

      .get("/dept") // TODO: http.get() = 백엔드 데이터 받아오기 함수(요청), 매개변수 입력 : 추가 url

      .then((response) => {

        // TODO: 백엔드 데이터 받기 성공하면 자동 실행됨

        setDept(response.data); // 실제 받은 백엔드 데이터 : 함수명(response.data)

        // 로그 찍기

        console.log(response.data);

      });

    // .catch() 생략가능  //  백엔드 데이터 받기 실패하면 자동 실행

  };

  // TODO: 화면이 뜰 때 retrieveContent() 함수 실행

  // 사용법 : useEffect(함수(), []);

  useEffect(retrieveContent, []);

  return (

    // TODO: 찾기/바꾸기 기능(단축키) : crtl + r

    // TODO: class 함수 입력시 className 코드 사용

    <div className="container">

      <h2 className="mt-3"> AXIOS 테스트 </h2>

      {/* 사용법 : dept.map((value, index)=>(<li>{value.dname}</li>)) */}

      <ul className="list-group">

        {dept.map((value, index) => (

          <li className="list-group-item" key={index}>

            {value.dname}

          </li>

        ))}

        {/* <li class="list-group-item">An item</li> */}

      </ul>

    </div>

  );

}

export default Home;

json_server 서버 진입 안하면 http://localhost:8000/ 에러 발생함

1. PS C:\Work\02_REACT\04_react\01_react_200\008\02_json_server> npm start 진입 성공 후 

2. PS C:\Work\02_REACT\04_react\01_react_200\008\01_axios> npm start 진입