React.js의 컨텍스트

Prop은 React 컴포넌트로 전달되는 인수입니다. React에서는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전송하는 props를 사용합니다. 때때로 우리는 부모에서 손자 구성 요소로 데이터를 전달해야하며 우리가 필요에 따라 손자 구성 요소에 부자가 될 때까지 구성 요소의 모든 단계에서 소품을 작성해야합니다. 부모에서 자식으로 3 단계 깊이가있는 경우 많은 글쓰기 소품.

데이터를 단계별로 전송하지 않고 손자 구성 요소로 직접 전송하는 방법이 있습니다. 한 가지 방법은 React-Redux입니다. 이것은 저장소를 만들고 해당 저장소에서 중요한 데이터를 수집하고 저장소 내의 모든 데이터를 원하는 구성 요소에 사용하는 방법입니다.

또 다른 방법은 컨텍스트를 사용하는 것입니다. 즉, 기본적으로 새 구성 요소를 만드는 것입니다.이 새 구성 요소에는 값으로 추가하는 모든 데이터가 있으며이 구성 요소를 다른 구성 요소에 둘러 쌉니다. 이런 식으로 우리는 그 가치를 주변 구성 요소와 공유 할 수 있습니다.

이 개념을 예를 들어 설명해 봅시다.

개념을 아주 멋지고 부드럽게 설명하는 YouTube 동영상에서 그 예를 가져 왔습니다.

이 예에서는 이름, 가격 및 ID가있는 3 개의 영화가있는 movies 배열이 있습니다. 이 앱을 사용하여 브라우저에 이러한 기능을 표시 할 것입니다.

아래 사진에는 앱 폴더가 있고 3 개의 구성 요소가 해당 폴더에 속하며 MovieProvider와 함께 있습니다.

<MovieProvider>

<Nav />

<영화 목록 />

<영화 추가 />

<MovieProvider />

잠시 후에이 MovieProvider에 대해 언급하겠습니다.

src 내부에 MovieContext.js 파일을 만들었습니다.이 파일은 기본적으로 모든 영화 데이터를 useState에 저장합니다.

우리는 모든 영화가있는이 파일을 가지고 있는데, 어떻게 소품 기능을 사용하지 않고 다른 컴포넌트에서 그 영화를 사용할 수 있습니까?

먼저 react에서 createContext를 가져와야합니다.

그런 다음 4 행과 같이 const MovieContext에서이를 강력하게 만듭니다.

우리는 이것을 다른 컴포넌트에서 사용해야하기 때문에 이것을 내보내고 있습니다.

또한 모든 영화가있는 MovieProvider 기능이 있습니다.

<MovieContext.Provider value = {[movies, setMovies]}>

{props.children}

</MovieContext.Provider value = {[movies, setMovies]}>

MovieContext.Provider는 자식 구성 요소에 데이터를 전달하는 방법입니다. 먼저 컨텍스트를 만든 다음 공급자 객체에 적용하여이 <movieContect.Provider가 갖는 모든 자식에 적용합니다.

useContext의 개념을 살펴 보겠습니다.

아래 그림에서 볼 수 있듯이 App 컴포넌트에 속하는 MovieList 컴포넌트가 있습니다.이 컴포넌트에는 우리가 할 수있는 모든 영화, movies.map 및 각 영화에 대한 <Movie />가 있어야합니다. 구성 요소,

그렇다면 MovieContext의 모든 영화를이 컴포넌트로 여기로 가져 오는 방법은 무엇입니까?

따라서 useContext 함수를 사용하고 MovieContext를 가져 와서 모든 영화를 MovieList 구성 요소로 가져옵니다. 이렇게하면 MovieContext.Provider 내부의 모든 값이 MovieList 구성 요소에 전달되고

11 행에 이걸로 영화에 사인을합니다

const [movies, setMovies] = useContext (MovieContext)

나머지는 16 행으로 각 이동의 개별 구성 요소를 갖습니다.

아래 그림에서 useContext를 사용하는 다른 컴포넌트를 보여 드리기 위해 Nav.js 컴포넌트가 있습니다. 이것도 App.js에 속합니다. MovieList 컴포넌트에서했던 것과 동일한 규칙을 적용하고 useContext를 가져 와서 라인을 적용합니다. 8 with useContext.

그게 다야 구성 요소가 원하는 곳에서 모든 영화를 사용할 수 있습니다.

자원