컨텍스트 API의 비밀스런 삶
소품 드릴
프롭 드릴링이라는 개념이 있습니다. 소규모 앱을 만들 때 종종 접하지 않습니다. 그러나 적당히 복잡한 웹 앱을 개발하기 시작하면 상태 관리가 정말 지루해집니다.
최근에 저는 개인 프로젝트를 진행하고 있습니다. 처음에는 상태 관리가 그렇게 어렵지 않았지만 다른 새 구성 요소와 페이지를 만들기 시작하면 추적하는 것이 약간 어려워졌습니다. Context API와 Redux라는 또 다른 개념에 대해 알고 있었지만. 나는 그것들을 사용할 만큼 내 프로젝트를 잘 계획하지 않았고 그것으로 힘든 시간을 보냈습니다.
왜 그런 말을 했습니까? 글쎄, 내가 기본적으로 해야 했던 것은 프롭 드릴이었습니다.
함수 또는 상태가 구성 요소 트리의 최상위 수준에서 선언되고 선언된 구성 요소와 필수 구성 요소 사이에 최소한 일부 구성 요소가 있는 트리의 하단으로 전달되는 경우 이를 Prop Drilling이라고 합니다.
내 말은 userpost라는 상태와 setUserPost 함수가 있고 Feed라는 또 다른 구성 요소가 있는 인덱스 페이지에 선언되어 있다고 가정해 보겠습니다. 이제 이 Feed 구성 요소에는 FeedForm이라는 내부 구성 요소가 있습니다.
Index Page에 선언된 FeedForm의 state userpost가 필요합니다. 어떻게 얻나요? 먼저 Feed 구성 요소로 보낸 다음 FeedForm 구성 요소로 보내야 합니다.
이것은 상대적으로 작은 간격이기 때문에 눈치채지 못할 수도 있습니다. 그러나 여러 구성 요소가 있는 대규모 웹 앱을 생각해 보십시오. 나는 당신이 그림을 얻는다고 가정한다. 선언된 구성 요소와 필수 구성 요소 사이에 있는 구성 요소에는 상태가 필요하지 않지만 여전히 다음 구성 요소로 보내려면 prop에 액세스해야 합니다.
여기에서 Context API 및 Redux와 같은 개념이 등장합니다.
컨텍스트 API 또는 useContext 후크
그래서 이미 말했듯이 이 후크는 상태를 훨씬 더 쉽게 관리하는 데 도움이 됩니다. 초기 선언과 호출 방법이 3~4줄의 추가 코드로 확장될 수 있지만 궁극적으로 prop 드릴 문제를 해결합니다.
처음에는 react에서 createContext 후크를 가져와야 합니다.
그런 다음 Provider라는 구성 요소에 액세스할 수 있습니다. 루트 구성 요소를 둘러싸고 있는 배포자와 같습니다. 종종 주요 앱 또는 라우팅입니다.
variableName.Provider를 사용하여 래핑됩니다.
ContextAPI 사용 방법의 예:
import { createContext, useReducer } from "react";
import RouteConfig from "./Router";
import { reducer, initialState } from "./reducers/userReducer";
export const UserContext = createContext();
const App = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<UserContext.Provider value={{ state, dispatch }}>
<RouteConfig UserContext={UserContext} />
</UserContext.Provider>
);
};
export default App;
루트 구성 요소가 래핑되면 다른 구성 요소로 쉽게 가져올 수 있습니다. useContext Hook을 가져온 다음 상태를 호출하고 이를 전달하기만 하면 됩니다.
//Inside A different component
import React, { useContext, useEffect } from "react";
import { UserContext } from "../../App";
const Example =()=>{
const { state, dispatch } = useContext(UserContext);
return (
console.log(state)
)
}
위의 코드에서 상태와 디스패치를 사용할 수 있지만 원하는 대로 DOM 트리 내부의 여러 수준으로 시각화할 수 있습니다.
Note:
1- In the example, I'm not populating the state so you won't see any result here.
2- I've also used another hook useReducer for better state management in the example. Check out about it in the previous installment of the series.
당신의 생각을 알려주고 내 및 .
Reference
이 문제에 관하여(컨텍스트 API의 비밀스런 삶), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sobhandash/the-secret-life-of-context-api-5250텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
