React?? ??? ?? ??

??? ?? ??? ?? API, ?????? ?? ?? ???? ??? ? React ??????? ???? ?? ?????. API?? ???? ????? ??? ???? ?? ?? JavaScript ??? ?? ??????? React? ?? ???? ??? ? ?? ??? ??? ?????.

? ?????? async/await, Promise ? ?? React ?? ??? ???? React?? ??? ??? ???? ??? ??? ???????.

---

1. ??? ??? useEffect ??

React? useEffect ??? ?? ??? ???? ? ???? ???? ?? ?? ???? ???? ? ?????. Hook ??? Promise? ?? ??? ? ???? Effect ???? ??? ??? ?????.

useEffect ???? async/await ??

useEffect ??? ???? ???? ???? ?? ??? ??? ???? ??? ??? ????.

import React, { useState, useEffect } from 'react';

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example API

const AsyncFetchExample = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using async/await inside useEffect
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(API_URL);
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const data = await response.json();
        setPosts(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData(); // Call the async function
  }, []); // Empty dependency array means this effect runs once when the component mounts

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchExample;

• async/await: ?? ?? ???? ????? ?????.
• ?? ??: ??? ???? ??? ???? ?????.
• ?? ??: ??? ???? ???? ??? ??? ?? ???? ?????.

? async/await? ??????

• ?? ???: .then() ? .catch() ??? ???? ????.
• ? ???? ?? ??: ??? ? ???? ???? ??? ? ????.

---

2. ??? ??? ?? ?? ??

? ?? ???? ?? ??? Promise? then() ? catch()? ?? ?? ???? ????. ? ??? async/await?? ? ????? ??? ??? ???? ?? JavaScript?? ??? ?? ?????.

?? ?? Promise ??Effect

??? ??? ??? Promise? then()? ???? ????.

import React, { useState, useEffect } from 'react';

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const AsyncFetchWithPromise = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchWithPromise;

• then(): Promise? ???? ??? ?????.
• catch(): API ?? ?? ???? ?? ??? ?????.
• ?? ??: ??? ???? ?? ???? ?????.

---

3. ??? ??? ??? useReducer ??

? ??? ?? ??? ??? ??? ???? ?? ?? ??(??, ??, ?? ?)? ???? ?? ?? useReducer? ?? ??? ???? ??? ?????.

??? ??? useReducer ??

import React, { useState, useEffect } from 'react';

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example API

const AsyncFetchExample = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using async/await inside useEffect
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(API_URL);
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const data = await response.json();
        setPosts(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData(); // Call the async function
  }, []); // Empty dependency array means this effect runs once when the component mounts

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchExample;

• useReducer: ??? ??? ??? ?? ?? ??? ?? ?? ?????.
• ?? ??: ??, ??, ?? ? ??? ??? ????? ?????.

---

4. ??? ??? ??? ??? ???? ??? ?? ?? ??

?? ???? ?? ?? ???? ??? ??? ????? ?? ?? ????. ??? ?? ??? ??? ?? ??? ????? ??? ? ??? ???? ??? ??? ?????.

??? ????? ?? ??? ?? ?? ??

import React, { useState, useEffect } from 'react';

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const AsyncFetchWithPromise = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchWithPromise;

• ??? ?? ??(useFetch): ??? ????, ?? ?? ? ?? ??? ?? ??? ??????.
• ????: ???? ???? ?? ?? ?? ???? ??? ???? ? ????.

---

5. ??

React?? ??? ??? ???? ?? ?? ? ??????? ???? ? ??????. useEffect, useReducer ? ??? ?? ??? ?? ??? ???? ??? ??? ?? ???? ??? ???? ??? ??? ??? ??? ? ????. ??? ????, ?? ??, ??? ??? ?? ?? ? ?? ??? ?? React? ??? ??? ????? ??? ? ?? ??? ??? ?????.

---

? ??? useEffect, Promise ? Custom Hooks? ???? React?? ??? ?? ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!