react 기본 예제 연습

Npm install react-router-dom axios

Yarn install react-router-dom axios -> 명시되어 있는 모듈 설치

yarn add  -> 명시되지 않는 새로운 모듈 설치

 

-> 라이브러리 의존성 추가 할 명령어 

 

Npm install node 모듈 설치 할수 있다 .

Yarn install 

 

 

React-router-dom 의존성 추가 해주고 

<BrowserRouter>

<Routes>

<Route>

<Link to>

useEffect() -> 컨포넌트 호출시 한번만 실행

useState() -> 컴포넌트에 변수 변경시 화면 재랜더링 

 

 

Axis -> 백엔드와 통신하는 부분 

const Home = () => {

useEffect(() => {

console.log('통신시작')

axios.get('http://localhost:8080/')

.then((response) => {

 

}).then((result) => {

})

console.log('통신끝')

}, []);

return (

<h1>Home</h1>

);

}

axios.get -> 메서드 방식이 get 방식이다.

 

 

imr -> 리엑트에서 기본적인 문법 꼭 있어야 한다.

import React, { useEffect } from 'react';

useEffect 를 추가한 모습이다.

 

●Home.js

import React, { useEffect } from 'react';

import { getLottoNumber } from '../api/home/homePageApi';

const Home = () => {

const initData = {

"drwtno1": 11

};

useEffect(() => {

getLottoNumber();

}, []);

return (

<div>

<h1>Home</h1>

<h2>첫번째 번호{initData.drwtno1}</h2>

</div>

);

}

export default Home;

 

import 로 정의 하면 된다.

이렇게 함수 호출을 할수 있다.

const Home = () => {

const initData = {

"drwtno1": 11

};

useEffect(() => {

getLottoNumber();

}, []);

해당되는 data 값중에 drwtno = 11 의 값을 프론트로 넘겨준다.

 

●getLottoNumber.js

import axios from "axios";

export const getLottoNumber = async () => {

const fetchData = async () => {

const result = await axios.get('/test/test');

console.log(result.status);

console.log(result.data);

}

fetchData();

};

 

통신을 이쪽으로 옮겼다.