오늘은 과거에 비해react 응용 프로그램을 만드는 것이 매우 간단하고 빠르다.
기능 구성 요소, 연결 및 컨텍스트 API의 시대입니다.현대 React로 다시 찍어봅시다our todo app from the past.

First of all; What are React Hooks and Context API?

갈고리: 갈고리는 React 응용 프로그램 개발의 구조로 구성 요소의 상태 논리를 추출하고 다시 사용할 수 있고 테스트할 수 있도록 합니다.
갈고리에 대한 추가 정보: Introducing Hooks – React
상하문 API: 상하문 API는 구성 요소 트리의 구성 요소 간에 데이터를 공유하는 방법을 제공합니다. 이 데이터를 사용하지 않는 구성 요소에 도구를 전달할 필요가 없습니다.
컨텍스트 API에 대한 자세한 내용을 보려면 여기를 클릭하십시오.Context – React
컨텍스트 API는 React.createContext 를 통해 컨텍스트를 작성해야 합니다.
새 컨텍스트는 컨텍스트의 Provider 및 Consumer 구성 요소를 제공합니다.

공급자는 컨텍스트의 데이터를 변경할 수 있습니다

소비자는 컨텍스트의 변화에 귀를 기울일 수 있습니다

이러한 테마를 고려하여,createreact 프로그램을 사용하여react 프로그램을 시작합니다.
createreact 응용 프로그램을 사용하려면 npx it to get up and running 을 사용합니다.

npx create-react-app todo-react

현재 우리는 이미 프로젝트를 준비했다. 우리는 yarn start 또는 npm start 을 사용하여 프로젝트의 초기 운행을 진행할 것이다
이것은 우리의react 프로젝트를 위해 로컬 개발 서버를 시작합니다.지금 브라우저에서 시작합니다https://localhost:3000. (포트 3000이 무료인 전제).브라우저에서 다음 화면이 표시됩니다.

현재 우리에게 중요한 파일은 App.js 입니다. 이것은 우리의 입구점입니다. 즉, 우리는 이곳에서 우리의 작은 todo 응용 프로그램을 조립할 것입니다.
우리 todo 응용 프로그램은 세 가지 주요 기능을 가지고 있기 때문이다.

서비스 목록

업무 추가

관리(완료 및 삭제/숨기기 완료로 표시)

기본 구성 및 유틸리티 함수는 컨텍스트 API를 통해 공유됩니다.
props에서 제공하는 todo 텍스트에서 todo 생성 함수를 가져옵니다.
이 함수는 todo 상태의 수합물화를 통해 todo 작업의 UI를 구축할 수 있습니다.
우리는 일부 기본 구조와 무작위 데이터부터 시작하여 처리해야 할 사항을 열거할 것이다.ToDo 작업에 대한 다음 데이터 구조를 살펴보겠습니다.

{
  text: "First Todo",
  description: "First Todo's Description",
  createdOn: new Date().toUTCString()
}

어레이의 경우 다음 기능 구성 요소를 생성합니다.

// ToDos.js
import React from "react";

export const Todo = ({ task, ...extra }) => (
  <div className="card mb-3 bt-3" {...extra}>
    <div className="card-body">
      <h5 className="card-title">{task.text}</h5>
      <p className="card-text">{task.description}</p>
      <div className="footer">
        <small>{task.createdOn}</small>
      </div>
    </div>
  </div>
);

export default ({ tasks }) => (
  <>
    {(tasks || []).map((task, index) => (
      <Todo task={task} key={index} />
    ))}
  </>
);

기능 구성 요소에 관해서는 다음과 같은 몇 가지를 주의해야 한다.

React는 이러한 기능 구성 요소의 컨텍스트에 필요합니다

화살표 함수에서 JSX

로 반환 가능

<>는 React.Fragment의 줄임말로 문서 부분과 유사하다.이것은 우리로 하여금 DOM의 청결을 유지할 수 있게 한다.

온라인: export default ({ todos }) => (;우리는 아이템에 대상을 사용하여 구조를 제거했다

응용 프로그램 컨테이너는 TODO를 유지하고 상기 구성 요소를 사용하여 TODO를 표시합니다.todos 구성 요소는 다음과 같습니다.

import React, { useState } from "react";
import Header from "./components/Header";
import ToDos from "./components/Todos";
import NewTask from "./components/NewTask";
import _tasks from "./_initial";

const App = () => {
  const [tasks, updateTasks] = useState(_tasks);

  return (
    <>
      <Header />
      <div className="container">
        <NewTask addTodo={task => updateTasks([...tasks, task])} />
        <hr />
        <ToDos tasks={tasks} />
      </div>
    </>
  );
};

export default App;

지금까지 로컬 응용 상태의 Todo와 새로운 Todo가 있습니다.상태 갈고리를 사용하여 애플리케이션 수준에서 TODO의 로컬 상태를 유지할 수 있습니다.
이제 새로운 업무 양식의 구성 요소를 살펴보겠습니다.

import React from "react";

export default ({ addTodo }) => {
  const handleAdd = e => {
    e.preventDefault();
    // we need data from Form; for that we can use FormData API
    const formData = new FormData(e.target);
    console.log("---Form---", formData);
    addTodo({
      text: formData.get("text"),
      description: formData.get("description"),
      createdOn: new Date().toUTCString()
    });
    e.target.reset();
  };

  return (
    <form onSubmit={handleAdd}>
      <div className="form-group">
        <label htmlFor="text" className="text-muted">
          Task:
        </label>
        <input name="text" type="text" id="text" className="form-control" />
      </div>
      <div className="form-group">
        <label htmlFor="description" className="text-muted">
          Description:
        </label>
        <textarea
          name="description"
          id="description"
          className="form-control"
        />
      </div>
      <div className="form-group">
        <button type="submit" className="btn btn-primary">
          Add
        </button>
      </div>
    </form>
  );
};

여기서 양식 필드에서 FormData API를 사용하여 값을 수집합니다.

P.S. If you wanna know more about Form Data API, you can head over here:
FormData API: Handle Forms like Boss 😎 - Time to Hack

이제 어플리케이션을 실행할 수 있도록 구성 요소를 구성합니다.

import React, { useState } from "react";
import Header from "./components/Header";
import ToDos from "./components/Todos";
import NewTask from "./components/NewTask";
import _tasks from "./_initial";

const App = () => {
  const [tasks, updateTasks] = useState(_tasks);

  return (
    <>
      <Header />
      <div className="container">
        <NewTask
          addTodo={task => updateTasks([...tasks, task])}
        />
        <hr />
        <ToDos tasks={tasks} />
      </div>
    </>
  );
};

export default App;

현재, 우리의 todo 응용 프로그램은 이미 준비가 되었다.
이 상태에서 응용 프로그램은 다음과 같습니다.

현재, 우리의 응용 프로그램을 더욱 맞춤형으로 만들기 위해서, 우리는 약간의 설정을 추가할 것이다.다음과 같습니다.

const app = {
  title: "Time to Hack",
  url: "https://time2hack.com",
  logo:
    "https://res.cloudinary.com/time2hack/image/upload/q_auto:good/t2h-text-banner.png"
};

const config = {
  sortBy: "createdOn",
  sortOrder: "DESC"
};

const sorters = {
  ASC: (a, b) => a[config.sortBy] - b[config.sortBy],
  DESC: (a, b) => b[config.sortBy] - a[config.sortBy]
};

const sorter = sorters[config.sortOrder];

export default {
  ...config,
  app,
  sorter
};

이제 다음 파일에서 컨텍스트를 작성합니다.

import React from "react";

const Config = React.createContext({});
Config.displayName = "Config";

export default Config;

그리고 응용 프로그램 항목에서 컨텍스트 공급자에게 값을 파종합니다.

  import React, { useState } from "react";
  import Header from "./components/Header";
  import ToDos from "./components/Todos";
  import NewTask from "./components/NewTask";
+ import Config from "./TodoContext";
+ import config from "./config";
  import _tasks from "./_initial";

  const App = () => {
    const [tasks, updateTasks] = useState(_tasks);

    return (
-      <>
+.     <Config.Provider value={config}>
        <Header app={config.app} />
        <div className="container">
          <NewTask addTodo={task => updateTasks([...tasks, task])} />
          <hr />
          <ToDos tasks={tasks} />
        </div>
-      </>
+      </Config.Provider>
    );
  };

  export default App;

이제 응용 프로그램의 다음 헤더에서 useContext 갈고리를 사용하여 컨텍스트 값을 사용할 수 있습니다.

import React from "react";

export default ({ app }) => (
  <header className="mb-3">
    <nav className="navbar navbar-dark bg-dark">
      <div className="container">
        <a className="navbar-brand" href={app.url}>
          <img src={app.logo} height="30" alt={app.title} />
        </a>
      </div>
    </nav>
  </header>
);

컨텍스트의 정렬 구성을 사용하여 작업의 정렬 순서를 나열합니다.

    import React, { useContext } from "react";
+   import Config from "../TodoContext";

    export const Todo = ({ task, ...extra }) => (
      <div className="card mb-3 bt-3" {...extra}>
        <div className="card-body">
          <h5 className="card-title">{task.text}</h5>
          <p className="card-text">{task.description}</p>
          <div className="footer">
            <small>
              {new Date(task.createdOn).toUTCString()}
            </small>
          </div>
        </div>
      </div>
    );

    export default ({ tasks = [] }) => {
+      const conf = useContext(Config);

      return (
        <>
          {tasks
+           .sort(conf.sorter)
            .map((task, index) => (
              <Todo task={task} key={index} />
            ))}
        </>
      );
    };

이것이 바로 우리가 갈고리와 상하문을 사용하여 상태를 쉽게 관리하고 전 세계 응용 프로그램 데이터를 공유하는 방법이다.
우리의 응용 프로그램은 지금 이렇게 보인다.

결론

여기서 우리는 다음과 같은 내용을 보았다.

create React app

을 사용하여 React app 시작

연결 사용 및 useState 상태 유지

컨텍스트 API를 사용하여 어셈블리 간에 데이터 공유

사용useContext갈고리

소비 상하문 데이터
React 갈고리와 컨텍스트 API는 어떻다고 생각합니까?
댓글로 알려주세요.💬 트위터와
만약 이 문장이 도움이 된다고 생각한다면 다른 사람과 나누십시오🗣
이 블로그에 가입하면 받은 편지함에서 새 게시물을 받을 수 있습니다.

신용

사진은 Filiberto Santillán 에서 Unsplash
최초 2020년 3월 24일 발표https://time2hack.com.