응답의 useContext() hook

반응형

Makers Academy의 최종 프로젝트인 소프트웨어 개발의 16주 선택적 BootCamp에서는 MERN 스택(MongoDB, Express, React 및 Node.js)을 사용하여 간단한 클릭 게임을 제작하기로 결정했습니다.
호스트된 최종 프로젝트는 https://버너드 수명입니다.herokuapp.com/

우리가 고민했던 것 중 하나는 "useContext()" 훅을 작동시키는 방법을 찾는 것이었습니다. 저는 애플리케이션 구성 요소 계층 전반에 걸쳐 수동으로 소품을 전달해야 하는 것을 방지하는 것이 유용할 수 있다고 생각했습니다. 2주간의 엔지니어링 프로젝트 기간 동안 이를 달성할 수 없었지만(구성 요소를 통해 스파게티 소품이 흘러내리는 결과를 초래했다), 그 이후 저는 이 소품을 효과적으로 사용하는 방법을 배웠고 동일한 문제를 가진 모든 사람을 위해 제가 이해한 프로세스를 문서화했습니다.

본론으로 들어가겠습니다. 첫째, 이 안내서에서는 이미 리액트 앱을 설정했다고 가정합니다.

리액트 앱 설정이 완료되면 먼저 컨텍스트라는 이름의 새 폴더를 리액트 프로젝트 디렉토리와 src 디렉토리 내에 생성합니다. 다음으로, NameOfContext.js 형식의 파일을 작성합니다.

전체적으로 useContext()가 작동하려면 컨텍스트 객체, 컨텍스트 공급자 및 일부 컨텍스트 함수가 필요합니다.

 

표시된 형식을 사용하여 컨텍스트 및 컨텍스트 제공자를 생성할 수 있습니다.

이것을 한 줄 한 줄씩 나누면, 1번째 줄은 단순히 react에서 createContext 함수를 가져오는 것입니다. 라인 3은 이 함수를 사용하여 컨텍스트 객체를 작성하고 컨텍스트 객체의 이름을 지정합니다(나중에 라인 13에서 기본 내보내짐).

5호선은 이 점이 흥미로워지는 부분이다. {children}을(를) 인수로 사용하고 방금 만든 컨텍스트에서 {children}을(를) 래핑하는 컨텍스트 공급자 함수를 만들고 내보내고 있습니다*. 가치 객체는 앱에서 사용할 컨텍스트에서 원하는 객체와 함수를 전달할 수 있는 소품으로 주어진다. 파일의 기본 내보내기가 컨텍스트가 되므로 개별적으로 내보내야 합니다.

*{children}은(는) 인수로 포함되는데, 아래 그림과 같이 이 공급자 내부의 컨텍스트에 액세스하려는 모든 것을 포장하기 때문입니다(이 경우 App.js 내부의 초기 div 내 모든 것(리액트-라우터-도메인으로부터의 모든 경로 포함).

 

제공자와 컨텍스트를 생성한 후에는 모든 내부 구성 요소가 이 컨텍스트에 액세스할 수 있도록 응용 프로그램을 제공자에서 래핑할 수 있습니다. 훌륭하지만 지금까지 컨텍스트 제공자는 사용 가능한 기능이 단 한 개도 없으므로 일부를 생성하여 구성 요소로 가져오도록 하겠습니다.

여기서는 useState() 후크를 React에서 가져와서 부울(사용자의 로그인 여부(loggedIn))을 추적하는 데 사용합니다. 그런 다음 전체 함수 callLogIn과 함께 이 객체를 전달합니다.API는 콘텍스트 프로바이더를 통해 useContext hook을 통해 컴포넌트 안에 래핑된 모든 구성 요소에서 가져올 수 있도록 한다.

N.B. 이 예에서 작동하려면 경로 "a-route"의 API가 {success: true } 본문을 가진 JSON 개체를 반환해야 합니다.

 

컨텍스트를 사용하려면 useContext() 후크를 react 및 컨텍스트 개체에서 가져옵니다.

그런 다음 useContext hook을 해체하여 필요한 개체나 함수를 추출합니다.

에트 보일라. 이제 컨텍스트 객체에 데이터를 저장하고, 제공자에 래핑된 모든 구성요소에서 이 컨텍스트 객체에 액세스하고, 컨텍스트 객체를 조작하기 위해 내보낸 모든 함수에 액세스할 수 있습니다. 이러한 방식으로 저장된 모든 데이터는 페이지를 새로 고치거나 사용자가 사이트를 떠날 때까지 유지됩니다.

 

야, 너! 제 블로그를 읽어주시고 확인해 주셔서 감사합니다. 진행 중인 작업이지만, 제가 쓴 다른 기사들도 얼마든지 확인해보세요.
또는 LinkedIn에서 저를 팔로우하거나 제 Github를 확인해보셔도 됩니다.