React ??? ?? ??

React ??????? ??? ???? ???? ?? ???? ????? ?? ??? ??? ???? ?? ???????. React ??? ??? ???? ?? ??? ?? ??? ???? ???? ???? ? ?? ???? ??? ? ?? ??????? ??? ? ??? ???. ??? ??? ???, ?? ??? ? ?? ?? ??? ???? ?? React ????? ???? ??? ???.

? ?????? ???? ? ?????? ?? ??, ??? ?? ??, ?? ??? ?? ?? React ??? ??? ????? ???????. ? ??? ???? ????. ????? ??? ????? ? ??? ??? ??? ???? ?? ??? ???? ? ?? React ??????? ??? ??? ???? ? ??? ? ????.

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

???? ? ?????? ?? ?? ??? UI ????? ?????? ??? ???? React?? ?? ???? ??? ?? ?????. ??? ??? ??? ??

??? ?? ???, ??? ? ??? ??? ?? ??? ??? ? ??? ???.

• ???? ?? ??: ???? ??, ?? ?? ? ??? ????? ?????. ??? ??? ?? ?????
? ?????.
• ?????? ?? ??: ??? ? UI ??? ?????. ??? ??? ??? ????
? ?????.

? ??? ?? ???? UI? ?? ??? ?? ??? ?? ?? ????? ??? ? ???? ?????? ?? ??? ?? ?????.

??? ??

1. ?? ????: ?????? ?? ??? ??????? ??? ???? ???? ? ????.
2. ??? ??? ???: ???? ?? ??? ???? ??? ??? ? ??????.
3. ??? ?? ??: ???? UI? ?? ??? ????? ??? ? ???? ??? ?? ??? ??? ??? ?????.

?: ??? ??? ???? ? ??

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

???? ????

import React, { useState, useEffect } from "react";
import UserList from "./UserList";

const UserContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return <UserList users={users} loading={loading} />;
};

export default UserContainer;

?????? ?? ??

import React from "react";

const UserList = ({ users, loading }) => {
  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

? ????:

• UserContainer? ??? ???? ???? ?? ??? ?? UserList? ???? ?????.
• UserList? ??? ??? ????? ??? ???.

? ??? ???? ??? ?? ??? ??? ???? ??????. ??? ???? ? UI ???? ???? ??? ??????? ?? ?????.

??? ?? ??? ??

Custom Hooks? ???? ??? ??? ??? ????? React ??? ? ???? ???? ? ????. ?? ?? ??? ?? ??? ???? ?? ?? ??? ???? ??? ??? ??? ? ????. ?? DRY(Don't Repeat Yourself) ??

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

?: ??? ?? ????

?? ??

import React, { useState, useEffect } from "react";
import UserList from "./UserList";

const UserContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return <UserList users={users} loading={loading} />;
};

export default UserContainer;

?? ??

import React from "react";

const UserList = ({ users, loading }) => {
  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

? ??? useFetchData ??? ??? ???? ??? ??????? ?? ?? ??? ???? ???? ???? ??? ? ??? ???. ??? ?? ??? ??? ????? ??? ????? ???? ? ?? ?????.

???? ??? ?? ??

????? ???? ??? ??? ? ??? ??? ?? ??? ???? ???? ??? ?????. ?? ??? ?? ??? ?? ????? ?? ????? ?? ???? ??? ????? ?? ????. React? useReducer ??? ? ??? ???? ? ??????.

???? ??

1. ?? ???: ?? ??? ??? ?? ????? ?????.
2. ???: ?? ???? ?? ??? ?? ??? ?????.
3. ?????: ?? ??? ???? ???? ???? ??????.

?: ?? ?? ??

??? ??

import { useState, useEffect } from "react";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetchData;

useReducer? ???? ?? ??

import React from "react";
import useFetchData from "./useFetchData";

const Posts = () => {
  const { data: posts, loading } = useFetchData("/api/posts");

  if (loading) return <p>Loading...</p>;
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default Posts;

? ????:

• authReducer? ??? ?? ??? ??? ????? ?????.
• AuthComponent? useReducer? ???? ?? ??? ?????.

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

Context API? ??? ??

??? ??? React? Context API? ???? prop ??? ?? ?? ?? ?? ??? ??? ?????. ???? ???? ?? ??? ???? ?? ??? ?? ??? ?? ???? ???? ? ??? ???.

??

1. ???? ??? ??: ?? ??? ????? ?? ??? ??? ??????.
2. ?? ??? ?? ??: ??? ??? ?? ?? ??? ?? ??? ? ????.

?: ?? ????

const initialState = { isAuthenticated: false, user: null };

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return initialState;
    default:
      return state;
  }
}

???? ??

import React, { useState, useEffect } from "react";
import UserList from "./UserList";

const UserContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return <UserList users={users} loading={loading} />;
};

export default UserContainer;

?? ??(HOC)

?? ?? ??(HOC)? ?? ??? ??? ??? ??? ? ?? ??? ???? ?????. ??? ???? ??? ?? ?? ???? ??? ???? ? ????.

??

1. ?? ????: ???? ?? ??? ?? ??? ???? ??? ?????.
2. ???: ?? ????? ??? ??? ??? ?????.

?: ?? HOC

import React from "react";

const UserList = ({ users, loading }) => {
  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

?? ??

?? ?? ?? ??? ???? ?? ???? ?? ?? ?? ??? ?? ?? ??? ??? ? ????. ? ??? ???? ??? ??? UI ?? ??? ??? ? ??????.

??

1. ??? ?? ???: ?? ?? ??? ??? ???? ??? ? ????.
2. ???: ?? ?? ??? ?? ?? ?? ?? ??? ???? ?????.

?: ? ?? ??

import { useState, useEffect } from "react";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetchData;

1. useMemo: ?? ??? ???? ???? ??? ?? ?? ?????.

import React from "react";
import useFetchData from "./useFetchData";

const Posts = () => {
  const { data: posts, loading } = useFetchData("/api/posts");

  if (loading) return <p>Loading...</p>;
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default Posts;

1. useCallback: ??? ???? ?? ?? ??? ??? ??? ? ?????.

const initialState = { isAuthenticated: false, user: null };

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return initialState;
    default:
      return state;
  }
}

?? ??? ??? ??? ?? ?? ??? UI ????? ??? ?????? ??? ???? React ?? ???? ?????.

??

React ??? ??? ??? ?? ?? ???? ?? ??? ???? ???? ??????? ???? ? ?????. ???? ? ?????? ?? ??, ??? ?? ??, ??? ?? ??? ???? ??? ????? ?? ????? ???? ??? ???? ? ????. ?? ?? ??, ?? ?? ??, ??? ??? ?? ?? ??? ??? ?? ?? ? ?? ?? ?? ??? ?? ??????.

??? ??? ?? ???? ?? ????. React ??? ?? ??? ???? ???? ???? ??? ???? ? ??? ???. ??? ??? ????? ???? ????, ???? ??, ????? ?? ??? ? ?? ??????? ????. ??? ??? React ??? ??? ???? ??? ?????? ?? ????? ??? ? ?? ??? ?????.
? ?? ???? ???? Patterns.dev? React ??? ?? ??? ?????.

? ??? React ??? ??: ?? ??? ??????? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!