React_개념_Day_06
#axios 공식사이트
axios를 사용하려면 2가지 용어를 알아야 합니다.
1.promise : 리절브,와 ㅁㄴㅇㅁㄴ 있다.
2.동형 : 하나를 가지고 처리
프라미스 : 에스큐터? 콜백함수/리스너(함수안에서 함수를 호출하는 것)기반으로
#
#폴더생성
●4
●#todoApi.js
import axios from "axios";
/*
Hook (기본적으로, )
useState() ㅡ 각개발자들이
[변수명, set함수명] = useState(초기값)
*/
export const API_SERVER_HOST="http://localhost:8080" //서버연결포트
const prefix = `${API_SERVER_HOST}/api/todo` //내것은 이것을 씁니다.
//번호얻는 함수getOne
export const getOne = async (tno) => { //async 이거안에서만 await(기다려줘)라는 것을 쓸 수 있습니다.
const res = await axios.get(`${prefix}/${tno}`) //그 번호를 조회해서 우리한테 데이터를 넘겨줘
return (await res).data
}
//async 비동기 처리
export const getList = async(pageParam) => {
const{page, size} = pageParam
const res = await axios.get(`${prefix}/list`,{params: {page:page, size:size}})
return res.data
}
//동기통신 : 나작업하는 동안에 다른것 멈춰있어
/*
request respone 반복하는 것
request respone
request respone
request respone
request respone
JAVA 할때, 쓰레드 동기 처리할려면, 싱크로나이즈, 붙이면 동기처리가 된다.
블록처리( request respone 반복 , 다른것은 멈춰있다.)
*/
//비동기통신 : 동시에 작업(작업이 들어올때까지, 기다리는 것이 아니고, 실행하게합니다.)
//ex) 네이버 날씨
//응답하고 리퀘스트가 정해져있찌 않다.
/*
request
request
request
response
request
response
response
*/
//리액트는 컴포넌트 단위로 불러오게됩니다.
//그 부분만 재랜더링 되는 형식으로 되어있는게 리액트입니다.
●#TestHook.js
//★설명할려고 존재하는 파일입니다. ★
// import React, {useState} from "react"; //
// //const CountExam = () => { }
// function CountExam(){
// const [count, setCount] = useState(0)
// return(
// <div>
// <h1>테스트 {count} 번 클릭</h1>
// <button onClick={() => setCount(count + 1)}>
// Click me
// </button>
// </div>
// );
// }
// export default CountExam;
//비동기방식에서 useEffect 훅을 사용합니다.
//에픽트훅사용하는 것 : 의도하지 않았는데, 실행되는 경우에 사용합니다.
//잠깐 실행되지 않도록 처리했습니다. (제어하기 위해서)
import React, {useState, useEffect} from "react";
//useEffect(이펙트 함수, 의존성 배열)
//의존성배열이 변경되면, 이펙트함수가 실행된다.가 중요합니다.
function CounterUseEffect(){
const [todo, setTodo] = useState(초기값(함수처리))
useEffect(()=>{
getOne(tno).then(data => {
console.log(data)
setTodo(data)
})
}, [tno])
return(
<div>
<h1>테스트 {count} 번 클릭</h1>
<button onClick={() => setCount(count + 1)}>
Click me2
</button>
</div>
);
}
export default CounterUseEffect;