비구조화할당 ( = 구조분해할당)

• 다음과 같이 하나하나 배열의 항목을 선언해 줄 수 있었다.

const classmates = ["철수","영희","훈이", ...]
const child1 = classmates[0]
const child2 = classmates[1]
const child3 = classmates[2]
...

• 하지만 비구조화할당을 이용한다면 한줄의 코드로 간편하게 선언해 줄 수 있다.

const [child1, child2, child3] = classmates // 안의 이름은 자유롭게 가능하다!

• 객체도 마찬가지로 해줄수 있다. ( 다만 안의 이름은 객체의 이름과 같아야한다. )

const child = {
  name : "경환",
  age: 13,
  school: "장수초등학교"
}
const {name, age, school} = child  // 안의 이름이 객체의 이름과 같아야 한다!
// const name = child.name
// const age = child.age
// const school = child.school

• 그래서 지금까지 useState와 useQuery를 사용할 때 에도 바로 이 비구조화할당이 사용됐었다.

useState 예시

function useState(){
  return ["state기능", "state변경하는함수"]
}
const [myName, setMyName] = useState("")
myName // "stat기능"
setMyName // "state변경하는함수"

useQuery 예시

fuction useQuery(){
return{
	data:{
  	   name:"경환",
  	   age: 13,
  	   school: "장수초등학교"
    	}
    }
}
const {data} = useQuery() // 실행후, return값이 객체
data // { name:"경환",age: 13,school: "장수초등학교" }

Callback

callback 함수에는 두가지 의미가 있다.

1. 다른 함수의 인자로 이용되는 함수
2. 이벤트에 의해 호출되어지는 함수

1. 다른 함수의 인자로 이용되는 함수

• 아래 add 함수에서 인자로 x, y가 들어간다.
  인자로는 보통 문자열, 숫자열, 배열, 객체등의 데이터가 들어가는데
  함수도 이 인자로 들어갈 수 있다.

function add (x, y) () {
 return x + y
}

• 다음과 같이 callback이란 인자안에 result 함수가 들어갈 수 있는 것이다.
  이 result 함수를 callback 함수라고 부른다.

function add (x, y, callback){
	let result = x * y
	callback(result)
}
function result (data) {
	console.log(data, "콜백함수 실행")
}
add(5, 10, result)

2. 이벤트에 의해 호출되어지는 함수

• 이벤트라 하면 onClick이나 onChange등이 이벤트였다.
  이 두가지 기능은 html에서 미리 만들어놓은 함수인데, 우리는 다음과 같이 사용해왔다.
  버튼을 누르게 되면 onClick이라는 함수가 실행되고 인자인 onClickUpload함수가 실행된다.
  onClickUpload함수 또한 callback 함수 인 것이다.
  onClickUpload를 호출한다라고도 말한다!

<button onClick={onClickUpload}></button>

이러한 callback 함수는 두가지로 다시 나눌 수 있다!

1. 동기적함수
2. 비동기적 함수

1. 동기적 callback

• Promise, async/await등 한번에 하나씩 서버 컴퓨터가 작업이 끝날 때까지 기다렸다가 다음 코드가 진행되는 함수를 의미한다.

2. 비동기적 callback

• 결과를 기다리지 않고 다음 코드를 실행하는 과정이다.

function Test () {
	console.log("3초 기다리기")
}
setTimeout(Test,3000);
console.log('이건 바로 실행')

• 위 함수를 실행해보면 이런 결과가 나온다.
  이처럼 기다리지 않고 바로 다음코드를 실행한 결과인 것이다.

"이건 바로 실행"
"3초 기다리기"

💻 실전코드

export default function CallbackPromiseAsyncAwaitPage() {
    const [myCallback, setMyCallback] = useState([]);
    function onClickMyCallback() {
    const ccc = new XMLHttpRequest();
    ccc.open("get", "http://numbersapi.com/random?min=1&max=200");
    ccc.send();
    ccc.addEventListener("load", (res) => {
      const num = res.target.response.split(" ")[0];
      //   setMyCallback(num);
      const aaa = new XMLHttpRequest();
      aaa.open("get", `http://koreanjson.com/posts/${num}`);
      aaa.send();
      aaa.addEventListener("load", (res) => {
        // console.log(res.target.response);
        const user = JSON.parse(res.target.response).UserId;
        const aaa2 = new XMLHttpRequest();
        aaa2.open("get", `http://koreanjson.com/posts?userId=${user}`);
        aaa2.send();
        aaa2.addEventListener("load", (res2) => {
          const result = JSON.parse(res2.target.response); // 특정 유저가 작성한 다른 게시물 목록
          setMyCallback(result);
        });
      });
    });}
  return (
    <>
      <h1>callback 함수</h1>
      <span>
        결과 :
        {myCallback.map((el) => (
          <div key={el.title}>{el.title}</div>
        ))}
      </span>
      <button onClick={onClickMyCallback}>Callback 요청하기!</button>
    </>

Promise

• 위의 비동기적 callback을 배웠지만 이렇게 연속적으로 사용하는 경우에는 callback지옥에 빠지게된다.
  

• Promise를 통해 해결할 수 있다!
  axios에서 지원하는 promise 라이브러리는 callback보다 더 효율적인 코드로 쓸 수 있다!

💻 실전코드

export default function CallbackPromiseAsyncAwaitPage() {
    const [myPromise, setMyPromise] = useState([]);
    function onClickMyPromise() {
    axios
      .get("http://numbersapi.com/random?min=1&max=200")
      .then((res) => {
        const num = res.data.split(" ")[0];
        return axios.get(`http://koreanjson.com/posts/${num}`);
      })
      .then((res2) => {
        const user = res2.data.UserId;
        return axios.get(`http://koreanjson.com/posts?userId=${user}`);
      })
      .then((res3) => {
        setMyPromise(res3.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }
  return (
    <>
      <h1>Promise</h1>
      <span>
        결과 :
        {myCallback.map((el) => (
          <div key={el.title}>{el.title}</div>
        ))}
      </span>
      <button onClick={onClickMyCallback}>Callback 요청하기!</button>
    </>

async / await

• 위의 Promise를 한층 더 직관적이고 깔끔하게 만든 것 이 async / await 기능이다.

• 위에서 부터 한줄씩 기다린다로 해석하면 굉장히 직관적이다!

  💻 실전코드

export default function CallbackPromiseAsyncAwaitPage() {
  const [myAsyncAwait, setMyAsyncAwait] = useState([]);
  async function onClickMyAsyncAwait() {
    const res1 = await axios.get("http://numbersapi.com/random?min=1&max=200");
    const num = res1.data.split(" ")[0];
    const res2 = await axios.get(`http://koreanjson.com/posts/${num}`);
    const user = res2.data.UserId;
    const res3 = await axios.get(`http://koreanjson.com/posts?userId=${user}`);
    setMyAsyncAwait(res3.data);
  }
  return (
    <>
      <h1>async / await</h1>
      <span>
        결과 :
        {myCallback.map((el) => (
          <div key={el.title}>{el.title}</div>
        ))}
      </span>
      <button onClick={onClickMyCallback}>Callback 요청하기!</button>
    </>

callback함수부터 promise, async /await까지 알아보았는데

똑같은 코드이지만 아래로 갈수록 코드가 더 직관적이고 효율적임을 알게되었다!

async / await를 쓰게 된 역사를 알아볼 수 있는 시간이었다.

async / await를 쓸 수 밖에 없는 내용을 알게 되었다.

다만 많은 내용을 꽤 함축적으로 배운 것 같아서 공부를 더 필요할 것 같다..!