오늘 사용한 팁 5가지.

다음은 React 응용 프로그램을 즉시 개선할 수 있는 신기한 기교 목록입니다.
이러한 기교는 당신의 코드를 더욱 깨끗하고 신뢰할 수 있을 뿐만 아니라, 당신의 개발 체험을 더욱 가볍고 즐겁게 할 수 있다.
오늘 당신의 React 프로젝트에서 이 기교들을 시험해 보세요!

Want the complete guide to become an expert React developer from front to back? Check out The React Bootcamp.

React Query로 Redux 교체

응용 프로그램이 커지면서 크로스 구성 요소 관리 상태가 어려워지면서 Redux와 같은 상태 관리 라이브러리가 필요할 수도 있습니다.
응용 프로그램이 API에서 가져온 데이터에 의존하는 경우 일반적으로 Redux를 사용하여 서버 상태를 가져온 다음 응용 프로그램 상태를 업데이트합니다.
이것은 도전적인 과정일 수 있다.데이터를 가져와야 할 뿐만 아니라 다른 상태를 처리해야 합니다. 이것은 데이터를 가지고 있느냐, 불러오느냐, 오류를 가지고 있느냐에 달려 있습니다.
Redux를 사용하여 서버에서 가져온 데이터를 관리하지 않고 React Query와 유사한 라이브러리를 사용합니다.
React Query는 유용한 갈고리와 쉽게 데이터를 다시 추출할 수 있는 능력을 통해 React 응용 프로그램의 HTTP 요청을 더욱 잘 제어할 수 있을 뿐만 아니라, 응용 프로그램 구성 요소의 상태를 빈틈없이 관리할 수 있으며, 보통 수동으로 상태를 업데이트할 필요가 없습니다.
다음은 색인에서 React 질의를 설정하는 방법입니다.js 파일:

import { QueryClient, QueryClientProvider } from 'react-query'
import ReactDOM from "react-dom";

import App from "./App";

const queryClient = new QueryClient()

const rootElement = document.getElementById("root");
ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  rootElement
);

여기에서, 우리는 우리가 과거에 보낸 모든 요청을 쉽게 관리할 수 있도록 캐시를 설정하고, 게다가 쿼리 클라이언트 제공 프로그램 구성 요소를 추가하여 전체 구성 요소 트리에 전달할 것이다.
React Query를 사용하여 요청을 보내려면 어떻게 해야 합니까?
useQuery 갈고리를 사용하면 이 점을 실현할 수 있습니다. 이것은 우리의 조회에 식별자를 가져옵니다. (이 예에서 사용자 데이터를 가져오고 있기 때문에 '사용자' 라고 부릅니다.) 그리고 이 데이터를 가져오는 함수를 추가합니다.

import { useQuery } from "react-query";

export default function App() {
  const { isLoading, isError, data } = useQuery("user", () =>
    fetch("https://randomuser.me/api").then((res) => res.json())
  );

  if (isLoading) return "Loading...";
  if (isError) return "Error!";

  const user = data.results[0];
  return user.email;
}

보시다시피 React Query는 데이터를 가져올 때 발생할 수 있는 다양한 상태를 관리합니다.우리는 더 이상 이러한 상태를 스스로 관리할 필요가 없다. 우리는 useQuery 되돌아오는 내용에서 그것들을 분해할 수 있다.
useQuery의 상태 관리 부분은 어디에서 작용합니까?
현재 우리는 사용자 데이터를 가져와 내부 캐시에 저장하고 있으며, 그와 관련된 '사용자' 키 호출 useQuery() 을 사용하여 다른 구성 요소에서 사용할 수 있도록 해야 한다.

import { useQuery } from "react-query";

export default function OtherComponent() {
  const { data } = useQuery('user');

  console.log(data);
}

사용자 정의 갈고리를 사용하여 React 컨텍스트 단순화

React Context는 구성 요소 트리에 걸쳐 데이터를 전달하는 좋은 방법입니다.그것은 도구를 사용하지 않고 우리가 좋아하는 모든 구성 요소에 데이터를 전달할 수 있도록 해 준다.
React 함수 구성 요소의 상하문을 사용하기 위해서, 우리는 useContext 갈고리를 사용합니다.
그러나 이렇게 하는 것은 약간 불리하다.상하문에서 전달된 데이터를 사용하고자 하는 모든 구성 요소에서useContext 갈고리를 가져오려면 상하문 대상과 import React를 가져와야 합니다.
매번 갈고리에서 사용자 정의 문장을 읽고 쓰는 것이 아니라 사용자 정의 갈고리를 만들 수 있습니다.

import React from "react";

const UserContext = React.createContext();

function UserProvider({ children }) {
  const user = { name: "Reed" };
  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}

function useUser() {
  const context = React.useContext(UserContext);
  if (context === undefined) {
    throw new Error("useUser in not within UserProvider");
  }
  return context;
}

export default function App() {
  return (
    <UserProvider>
      <Main />
    </UserProvider>
  );
}

function Main() {
  const user = useUser();

  return <h1>{user.name}</h1>; // displays "Reed"
}

이 예에서는 사용자 정의 UserProvider 구성 요소에 사용자 데이터를 전달합니다. 이 구성 요소는 사용자 대상을 받아들이고 메인 구성 요소를 둘러싸고 있습니다.
우리는 useUser 갈고리가 하나 있는데, 이 상하문을 더욱 쉽게 사용할 수 있다.우리는 이 갈고리 자체를 가져오기만 하면 우리가 좋아하는 모든 구성 요소에서 우리의 사용자 상하문, 예를 들어 우리의 메인 구성 요소를 사용할 수 있다.

사용자 정의 구성 요소의 상하문 공급자 관리

작성한 거의 모든 React 응용 프로그램에는 여러 컨텍스트 제공 프로그램이 필요합니다.
컨텍스트 공급자가 필요할 뿐만 아니라, 우리가 만들고 있는 React 컨텍스트뿐만 아니라, 도구를 구성 요소에 전달하기 위한 제3자 라이브러리 (예: React Query) 도 필요합니다.
일단 당신이 React 프로젝트를 한동안 시작하면, 다음은 대체적인 상황입니다.

ReactDOM.render(
  <Provider3>
    <Provider2>
      <Provider1>
        <App />
      </Provider1>
    </Provider2>
  </Provider3>,
  rootElement
);

우리는 이런 엉망진창인 물건들을 어떻게 처리해야 합니까?
모든 상하문 공급자를 응용 프로그램에 두는 것이 아니라js 파일이나 인덱스.js 파일, 우리는 ContextProviders라는 구성 요소를 만들 수 있습니다.
이것은 children 도구를 사용할 수 있도록 합니다. 그리고 우리가 해야 할 일은 이 구성 요소에 모든 공급자를 넣는 것입니다.

src/context/ContextProviders.js

export default function ContextProviders({ children }) {
  return (
    <Provider3>
      <Provider2>
        <Provider1>
          {children}
        </Provider1>
      </Provider2>
    </Provider3>
  );
}

그런 다음 응용 프로그램 주위에 ContextProviders 구성 요소를 포장합니다.

src/index.js

import ReactDOM from "react-dom";
import ContextProviders from './context/ContextProviders'
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <ContextProviders>
    <App />
  </ContextProviders>,
  rootElement
);

"대상 확산" 조작부호를 사용하면 아이템을 쉽게 전달할 수 있습니다

구성 요소를 사용할 때, 우리는 보통 도구를 빌려 데이터를 전달한다.우리는 도구의 이름을 만들고 그것을 상응하는 값으로 설정합니다.
그러나 만약 우리가 많은 도구를 하나의 구성 요소에 전달해야 한다면, 우리는 그것들을 단독으로 열거해야 합니까?
아니오, 우리는 없습니다.
아주 간단한 방법은 {...props} 모드를 사용하면 모든 아이템의 명칭과 그에 대응하는 값을 쓰지 않아도 우리가 좋아하는 아이템을 전달할 수 있다.
이것은 모든 아이템 데이터를 하나의 대상에 넣고 우리가 전달하고자 하는 구성 요소에 각각 전달하는 것과 관련된다.

export default function App() {
  const data = {
    title: "My awesome app",
    greeting: "Hi!",
    showButton: true
  };

  return <Header {...data} />;
}

function Header(props) {
  return (
    <nav>
      <h1>{props.title}</h1>
      <h2>{props.greeting}</h2>
      {props.showButton && <button>Logout</button>}
    </nav>
  );
}

세션 매핑을 위한 React fragment

React의 .map() 함수는 그룹을 가져와 교체한 다음, 일부 JSX에 모든 요소의 데이터를 표시할 수 있도록 합니다.
그러나 어떤 경우, 우리는 이 데이터를 교체하기를 원하지만, 끝난 JSX 요소에서 그것을 되돌려 주기를 원하지 않는다.폐쇄된 JSX 요소를 사용하면 프로그램을 수정할 수도 있고, DOM에 다른 요소를 추가하고 싶지 않을 수도 있습니다.
부모 요소를 HTML 요소로 바꾸는 것이 아니라 데이터 그룹을 교체할 수 있는 흔치 않은 기교 React.Fragment 를 사용하는 것이다.
React 세션의 직접적인 형식을 사용하면 key 도구를 제공할 수 있습니다. 이것은 우리가 교체하는 모든 요소에 필요한 도구입니다.

import React from 'react'

export default function App() {
  const users = [
    {
      id: 1,
      name: "Reed"
    },
    {
      id: 2,
      name: "John"
    },
    {
      id: 3,
      name: "Jane"
    }
  ];

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

필요한 key 아이템을 속기 세션 대체품에 사용할 수 없습니다: <></>.

더 원하십니까?훈련소에 들어가다

The React Bootcamp는 당신을 슈퍼스타로 만들기 위해 멋진 수업에서 업무를 준비하는 React 개발자입니다. 영상, 메모 등을 포함합니다.
내막 정보를 얻는 100여 명의 개발자들은 전문가가 되어 꿈꾸는 일을 찾아 자신의 미래를 장악하는 데 익숙해졌다.

열릴 때 알림을 받으려면 여기를 누르십시오