컨텍스트 API란 무엇입니까? 왜 사용해야 합니까? 반응에 사용하는 방법?

Context API: Context API는 소품 드릴링 없이 한 구성 요소에서 다른 구성 요소로 데이터를 전달할 수 있는 React 구조입니다.

왜 사용해야 합니까?

컨텍스트를 사용해야 하는 이유를 알기 전에 컴포넌트가 무엇인지, props 드릴링이 무엇인지 알아야 합니다.

구성 요소: 애플리케이션이 너무 커지면 해당 애플리케이션을 관리하기가 매우 어려워집니다. 응용 프로그램을 더 쉽게 관리할 수 있도록 구성 요소라고 하는 더 작은 섹션으로 나눕니다. 재사용성은 컴포넌트 생성의 가장 큰 특징 중 하나입니다.



Prop 드릴링: Reacts 데이터 흐름 시스템은 단방향입니다. 트리의 한 구성 요소에서 다른 구성 요소로 데이터를 전달해야 할 때 prop 드릴링 프로세스를 사용해야 합니다. 이 과정에서 소품은 한 구성 요소에서 데이터가 필요하지 않지만 트리를 통해 데이터를 전달하는 데 도움이 되는 다른 구성 요소로 전달됩니다. 소품 드릴링이라고합니다.

프롭 드릴링을 피해야 하는 이유는 무엇입니까?

React는 매우 인기 있는 JavaScript 라이브러리입니다. 그 이유는 구현하기 쉽고 단일 페이지 애플리케이션에서 뛰어난 성능을 발휘하기 때문입니다. 그러나 개발자가 라이브러리로 작업할 때 직면하는 가장 큰 장애물 중 하나는 구성 요소가 과도하게 다시 렌더링되어 애플리케이션 성능이 느려지는 것입니다. 그리고 구성 요소 다시 렌더링은 개발자가 소품 드릴로 알려진 프로세스에서 서로 통신하기 위해 구성 요소가 필요할 때 특히 피해를 줍니다.
이것이 우리가 prop drilling을 피해야 하는 이유이며, 컨텍스트 API는 이 문제를 해결하는 데 도움이 될 것입니다.

반응에 사용하는 방법?

우선, 애플리케이션에서 createContext() 에서 react 함수를 가져와서 컨텍스트를 생성해야 합니다. 그런 다음 다른 구성 요소에서 사용할 수 있도록 내보냅니다. 그리고 공급자를 통해 모든 데이터를 값으로 전달합니다.

그런 다음 모든 구성 요소가 데이터를 사용할 수 있도록 다른 모든 구성 요소를 이 컨텍스트의 children로 사용합니다.

import React, { createContext } from "react";
import useFirebase from "../../hooks/useFirebase";
export const AuthContext = createContext();
const AuthProvider = ({ children }) => {
  const allContexts = useFirebase();
  return (
    <AuthContext.Provider value={allContexts}>
      {children}
    </AuthContext.Provider>
  );
};
export default AuthProvider;

이제 다른 파일을 만들고 useContext() 에서 가져오기react 기능을 사용하고 컨텍스트 데이터 및 return로 전달하여 다른 구성 요소에서 사용할 수 있도록 합니다.

import { useContext } from "react";
import { AuthContext } from "../contexts/AuthProvider/AuthProvider";
const useAuth = () => {
  const auth = useContext(AuthContext);
  return auth;
};
export default useAuth;

마지막으로 AuthProvider로 모든 자식을 래핑합니다.

function App() {
  return (
    <AuthProvider>
      <Booking />
      <Dashboard />
    </AuthProvider>
  );
}
export default App;

이제 소품 드릴 없이 모든 구성 요소의 모든 데이터를 사용할 수 있습니다.