React Hooks 및 컨텍스트

Hooks는 데이터를 저장하고 해당 데이터를 업데이트하며 필요할 때 다른 기능을 실행할 수 있는 쉬운 방법을 제공합니다. 최근 프로젝트에서 사용자 토큰을 저장하는 가장 좋은 방법을 연구할 때 메모리에 사용자 토큰을 저장하려는 문제가 발생했습니다. 그 토큰을 저장하고 공유하기 위해 저는 React의 컨텍스트를 사용하여 데이터가 지속되도록 하고 가져오기를 최소화하고 해당 데이터에 액세스하기 위해 후크를 사용해야 했습니다. 하지만 먼저 해결해야 할 몇 가지 문제가 있었습니다.

데이터가 후크에 지속되지 않음

React 코드에서 후크가 호출되면 후크의 별도 인스턴스가 생성됩니다. 다음 예제에는 ComponentOne이 후크를 사용하여 데이터를 표시하고 ComponentTwo가 데이터를 업데이트하는 작은 프로그램이 있습니다. 이 코드를 실행하면 구성 요소 1은 "This is the data"를 표시하고 구성 요소 2는 "This is also data"를 표시합니다. 여기 에서 실행 중인 코드를 볼 수 있습니다 .

사용자 후크가 사용 데이터를 효율적으로 저장하고 공유할 수 있도록 하기 위해 createContext라는 React 함수를 사용할 것입니다.

컨텍스트에 상태 저장

컨텍스트는 현재 인증된 사용자, 테마 또는 선호하는 언어와 같은 React 구성 요소 트리에 대해 "전역"으로 간주될 수 있는 데이터를 공유하도록 설계되었습니다. 다음 예제에서는 사용자 이름을 저장하는 컨텍스트를 만들 것입니다. 여기에서 실행 중인 코드를 볼 수 있습니다 .

두 구성 요소를 모두 실행할 때 이제 "Santa"라는 이름을 렌더링합니다. "공급자"를 설정했기 때문입니다. 모든 컨텍스트 개체에는 공급자가 있습니다. 공급자는 항상 값 소품을 사용합니다. 이 경우 사용자 이름과 set username이라는 메서드가 있는 개체를 전달했습니다. 이제 사용 컨텍스트를 호출할 때 해당 값을 가진 객체가 제공됩니다.

사용자 정의 후크 개선

위의 코드에는 사용자 정의 후크를 사용하여 수정할 수 있는 작은 문제가 하나 있습니다. 이와 같은 작은 응용 프로그램에서는 괜찮습니다. 우리의 모든 코드는 지역적이며 사용하기 쉽습니다. 그러나 더 큰 응용 프로그램에서는 AuthContext를 사용하려고 할 때마다 두 개의 가져오기를 정의해야 합니다. React에서 useContext를 가져오고 자체 코드에서 AuthContext를 가져와야 합니다.

이렇게 하는 대신 사용자 정의 후크를 빌드하여 하나의 가져오기를 가질 수 있습니다. 여기 에서 라이브 코드를 볼 수 있습니다 .

두 개의 가져오기 대신 이제 AuthContext에 있는 모든 메서드와 속성에 대한 액세스를 제공하는 useAuth 후크를 간단히 가져올 수 있습니다.

결론

Hooks, Context 또는 React와 같은 라이브러리가 제공하는 기타 기능을 사용하는 데 옳고 그른 방법은 없습니다. 귀하의 경우에 가장 적합한 것이 무엇인지 파악하는 것이 중요합니다. 이 예제가 후크를 사용하여 상태를 공유하는 방법을 이해하는 데 도움이 되었기를 바랍니다.