Zustand (1)

학습 목표

이 영상은 React에서 전역 상태 관리를 위한 useContext 훅과 Zustand 라이브러리의 기반이 되는 useContext의 작동 원리를 이해하는 것을 목표로 합니다. useContext를 사용하여 컴포넌트 간의 데이터 전달 복잡성을 줄이고, 전역 상태를 효율적으로 관리하는 방법을 학습합니다.

핵심 개념

• Props Drilling: 여러 컴포넌트 계층을 거쳐 데이터를 전달하는 과정에서 발생하는 비효율성 및 복잡성을 의미합니다. 부모 컴포넌트에서 자식 컴포넌트로, 또 그 자식의 자식으로 데이터를 전달해야 할 때, 중간 컴포넌트들은 해당 데이터를 사용하지 않더라도 props를 받아 전달해야 합니다.
• createContext: React에서 전역 상태를 생성하고 관리하기 위한 API입니다. createContext를 통해 Context 객체를 생성하고, 이 객체의 Provider 컴포넌트를 사용하여 하위 컴포넌트들에게 상태를 공급합니다.
• useContext Hook: 함수형 컴포넌트에서 Context 객체의 값을 읽어올 수 있게 해주는 React 훅입니다. createContext로 생성된 Context 객체를 인자로 받아 해당 Context의 현재 값을 반환합니다. 이를 통해 props drilling 없이도 필요한 컴포넌트에서 전역 상태에 접근할 수 있습니다.
• Context Provider: createContext로 생성된 Context 객체가 제공하는 컴포넌트로, value prop을 통해 하위 컴포넌트들에게 전달할 상태 데이터를 지정합니다. 이 Provider로 감싸진 하위 컴포넌트들은 useContext를 통해 해당 value에 접근할 수 있습니다.

공부 방향성

이 영상을 시청하기 전에 React의 기본적인 컴포넌트 구조와 props 전달 방식에 대한 이해가 있다면 학습에 도움이 됩니다. 영상에서는 useContext를 활용한 테마 변경 기능과 사용자 로그인 상태 관리를 예시로 보여줍니다. 시청 후에는 useContext를 직접 사용하여 간단한 전역 상태 관리 애플리케이션을 만들어보고, Zustand와 같은 상태 관리 라이브러리가 useContext를 어떻게 활용하는지 더 깊이 탐구해보는 것을 추천합니다.