React 외부 구현 상태관리와 전역 상태관리의 장점

• React 내부에서 상태를 관리하는 방법

React에서 상태 관리는 컴포넌트 내에서 데이터(상태)를 관리하고 업데이트하는 방법입니다. 상태는 컴포넌트가 렌더링하고 유지하는 데이터를 의미하며, 이를 통해 UI가 사용자 상호작용에 따라 동적으로 변경됩니다. 상태 관리를 위해 가장 많이 사용하는 훅(Hook)은 useState와 useReducer, Redux 입니다.

 

• Context API란?

Context API는 React에서 전역적으로 데이터를 전달하기 위한 방법입니다. 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 대신, Context API를 사용하면 중간 단계의 컴포넌트들을 거치지 않고 필요한 컴포넌트에 데이터를 직접 제공할 수 있습니다.

• React 외부에서 상태를 관리하는 방법

React 외부에서 상태를 관리하는 방법은 상태를 컴포넌트 외부의 별도 라이브러리를 통해 관리하는 것입니다. 주로 Redux, MobX, Zustand, Recoil 같은 상태 관리 라이브러리를 사용합니다.

 

• Redux & Redux Toolkit이란?

Redux는 애플리케이션의 상태를 전역적으로 관리할 수 있게 도와주는 JavaScript 라이브러리입니다. Redux는 예측 가능한 상태 관리를 제공해 큰 애플리케이션에서도 상태를 쉽게 관리할 수 있도록 합니다.

Redux Toolkit은 Redux의 사용을 더 쉽게 만들어주는 라이브러리입니다. 기존 Redux의 복잡한 설정을 줄이고, 간결한 API를 제공해 상태 관리를 빠르고 직관적으로 할 수 있습니다.

 

• Props Drilling이란?

Props Drilling은 데이터를 부모에서 자식 컴포넌트로 전달할 때, 중간에 필요 없는 여러 컴포넌트를 거쳐 데이터를 전달하는 과정을 말합니다. 이는 코드의 유지보수를 어렵게 하고, 중간 컴포넌트가 복잡해질 수 있습니다. Context API나 Redux 같은 전역 상태 관리 도구를 사용하면 Props Drilling 문제를 해결할 수 있습니다.

출처: OZ코딩스쿨 React 강의

출처: OZ코딩스쿨 React 강의

• 전역 상태 관리의 필요성

전역 상태 관리는 큰 애플리케이션에서 상태를 한 곳에서 관리하여 일관된 데이터 흐름을 유지하도록 돕습니다. 이를 통해 Props Drilling을 피할 수 있고, 애플리케이션의 상태를 더 쉽게 추적하고 디버깅할 수 있습니다.

출처: OZ코딩스쿨 React 강의