나의 React 여정: 9일차

오늘 배운 내용:

1. 비동기 자바스크립트:

정의: 비동기 프로그래밍을 통해 JavaScript는 이전 작업이 완료될 때까지 기다리지 않고 작업을 수행할 수 있습니다.
사용 사례: API 호출 또는 기타 시간이 많이 소요되는 작업 수행
이점: 응답을 기다리는 동안 다른 작업을 실행할 수 있어 효율성이 향상됩니다.

1. 콜백:

• 정의: 콜백은 다른 함수에 인수로 전달되어 나중에 필요할 때 실행되는 함수입니다.
• 도전 과제: 중첩된 콜백은 콜백 지옥을 만들어 코드를 읽고 유지 관리하기 어렵게 만듭니다.
• 해결책: 비동기 처리를 단순화하기 위해 Promise가 도입되었습니다.

1. 약속:
2. 정의: Promise는 비동기 작업을 보다 깔끔하게 처리하고 콜백 지옥을 방지합니다.

• 약속 상태:
  보류 중: 초기 상태, 결과를 기다리는 중입니다.
  해결됨: 작업이 성공했습니다.
  거부됨: 작업이 실패했습니다.

• 방법:

.then(): Promise가 해결되면 실행됩니다.
.catch(): Promise가 거부되면 실행됩니다.
.finally(): Promise가 해결되거나 거부되는지 여부에 관계없이 실행됩니다.

약속 예시

const fetchData = () => {
    return new Promise((resolve, reject) => {
        let success = true; // Simulating success or failure
        setTimeout(() => {
            success ? resolve("Data fetched!") : reject("Failed to fetch data.");
        }, 2000);
    });
};

fetchData()
    .then((data) => console.log(data)) // Output: Data fetched!
    .catch((error) => console.error(error))
    .finally(() => console.log("Operation completed."));

1. 비동기/대기

• 목적: 더욱 깔끔하고 읽기 쉬운 코드를 위해 Promise를 기반으로 구축되었습니다.
• 비동기 함수: 비동기 작업을 처리할 함수를 선언합니다.
• 대기 키워드: Promise가 해결되거나 거부될 때까지 함수 실행을 일시 중지합니다.

비동기/대기의 예:

const fetchDataAsync = async () => {
    try {
        const data = await fetchData(); // Wait for the promise to resolve
        console.log(data);             // Output: Data fetched!
    } catch (error) {
        console.error(error);
    } finally {
        console.log("Operation completed.");
    }
};

fetchDataAsync();

5.실제 비유:

• 약속: 보류 중: 피자를 온라인으로 주문하고 배송을 기다립니다. 해결됨: 피자가 도착했습니다. 식사를 즐기세요. 거부됨: 피자가 도착하지 않습니다. 불평합니다.
• Async/Await: 피자가 도착하기를 기다리는 동안 계속해서 책을 읽습니다.

6.약속.모두

• 목적: 여러 Promise를 동시에 실행하고 모두 완료될 때까지 기다립니다. 예:

const promise1 = Promise.resolve("Task 1 completed");
const promise2 = Promise.resolve("Task 2 completed");

Promise.all([promise1, promise2])
    .then((results) => console.log(results)) // Output: ["Task 1 completed", "Task 2 completed"]
    .catch((error) => console.error(error));

1. Fetch API를 사용한 비동기/대기

• Fetch: JavaScript로 HTTP 요청을 만드는 현대적인 방법입니다. 예:

const fetchDataFromAPI = async () => {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
};

fetchDataFromAPI();

하이라이트

• 비동기 작업을 정리하고 오류 처리를 개선합니다.
• Async/Await를 사용하면 특히 연결된 Promise의 경우 코드를 더 쉽게 작성하고 이해할 수 있습니다.
• Promise.all은 여러 비동기 작업을 병렬로 실행하는 데 유용합니다.

지금까지는 정말 아름다운 여행이었습니다.

불이 난 10일차

위 내용은 나의 React 여정: 9일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!