TC - 3번일지 (callback, 동기 비동기)

10. callback 함수

CHAT GPT 한테 물어보니,

콜백 함수(callback function)는 다른 함수에서 자신을 호출하도록 미리 약속된 함수를 의미합니다. 이 함수는 일반적으로 다른 함수에 인수(argument)로 전달되며, 해당 함수가 실행된 이후에 호출됩니다.

예를 들어, 다음과 같은 상황을 생각해보세요. A라는 함수가 B라는 함수를 호출할 때, B 함수가 실행을 완료한 이후에 A 함수에서 C 함수를 호출해야 하는 상황이 있습니다. 이 경우에 B 함수를 호출할 때, C 함수를 콜백 함수로 인수로 전달하여 B 함수가 실행을 완료한 후에 자동으로 C 함수가 호출되도록 할 수 있습니다.

따라서, 콜백 함수는 비동기적인 상황에서 유용하게 사용됩니다. 이를 통해, 한 함수가 실행을 완료한 이후에 다른 함수를 호출하거나, 어떤 조건이 충족되었을 때 다른 동작을 수행하도록 할 수 있습니다.

라고 한다. 내가 작성한 아래 코드에선 NewPost.jsx에서 작성한 onBodyChange가 콜백함수가 되겠다.

✍ NewPost.jsx

import classes from "./NewPost.module.css";

function NewPost(props) {
  return (
    <form className={classes.form}>
      <p>
        <label htmlFor="body">Text</label>
        <textarea id="body" required rows={3} onChange={props.onBodyChange} />
      </p>
      <p>
        <label htmlFor="name">Your name</label>
        <input type="text" id="name" required onChange={props.onAuthorChange} />
      </p>
    </form>
  );
}

export default NewPost;

✍ PostList.jsx

import { useState } from "react";

import Post from "./Post";
import NewPost from "./NewPost";
import Modal from "./Modal";
import classes from "./PostList.module.css";

function PostList() {
  const [enteredBody, setEnteredBody] = useState("");
  const [enteredAuthor, setEnteredAuthor] = useState("");

  function bodyChangeHandler(event) {
    setEnteredBody(event.target.value);
  }

  function authorChangeHandler(event) {
    setEnteredAuthor(event.target.value);
  }

  return (
    <>
      <Modal>
        <NewPost
          onBodyChange={bodyChangeHandler}
          onAuthorChange={authorChangeHandler}
        />
      </Modal>
      <ul className={classes.posts}>
        <Post author={enteredAuthor} body={enteredBody} />
        <Post author="Manel" body="the second props pratice!" />
      </ul>
    </>
  );
}

export default PostList;

설명을 덧붙이자면, onBodyChange은 NewPost 컴포넌트의 속성prop으로 전달된 콜백 함수를 가리키는 변수 이름이다. 이 콜백 함수는 NewPost 컴포넌트에서 발생한 이벤트(onChange)가 호출될 때마다 실행된다. NewPost 컴포넌트의 onChange 이벤트가 호출될 때마다 onBodyChange 함수가 실행되어 PostList 컴포넌트의 bodyChangeHandler 함수를 호출하게 되고, enteredBody `값을 업데이트하고, 변경된 state 값으로PostList` 컴포넌트가 다시 렌더링되어 화면이 업데이트된다.

11. 동기(Synchronous) & 비동기(Asynchronous)

이것 역시 CHAT GPT 한테 물어보니,

우선 리액트에서의 동기와 비동기는 일반적인 프로그래밍에서의 동기와 비동기와 같은 개념이다.

동기(Synchronous)는 요청한 작업이 완료될 때까지 기다리는 방식이고, 비동기(Asynchronous)는 요청한 작업이 완료되기 전에 다른 작업을 수행할 수 있는 방식이다.

리액트에서의 상태(state) 변경은 대개 동기적으로 처리됩니다. 즉, 상태 변경이 일어날 때 리액트는 해당 변경 작업이 완료될 때까지 기다립니다. 이를 통해 변경 작업이 완료된 후에 UI가 다시 렌더링되어 사용자에게 변경 내용이 반영되는 것입니다.

하지만, 리액트에서는 비동기적으로 데이터를 가져오는 작업이 필요한 경우가 있습니다. 이 때는 일반적으로 비동기 함수인 async/await 또는 Promise를 사용하여 데이터를 가져옵니다. 이러한 경우에는 요청한 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행할 수 있으므로, 애플리케이션의 성능을 향상시킬 수 있습니다.

따라서, 리액트에서는 일반적으로 상태 변경과 같은 작업은 동기적으로 처리하고, 데이터를 가져오는 작업은 비동기적으로 처리합니다.

11-1. chat gpt와 대화.

그래서 내가 답변하길

결국 결론은 사람이 이해하기 쉽고 유지보수 할 수 있게 하도록 동기방식으로 프로그래밍을 하고, 어플의 성능향상, 효율을 위해 꼭 필요할때만 쓴다. 그리고 콜백 함수는 동기든, 비동기든 필요한 상황에 적절히 쓴다.
머지 않은 미래에 ai를 활용해서 비동기프로그래밍이 대세가 될지도...?!