React에서 상태관리를 왜 할까?

상태(state)란?

상태관리를 왜 하는지 알아보기전, 상태가 무엇인지 알고 있어야 한다.

오늘날 웹 어플리케이션에서 상태는 동적이면서, 렌더링에 영향을 주는 값이라고 할 수 있다.

리액트 공식 문서 참고

Plain Javascript Object hold information influences the output of render

리액트는 그 자체 만으로도 상태를 관리할 수 있는 수단을 제공한다.

예를 들어서, useState, useReducer, Context API 등

그래서 서드 파티 라이브러리(제 3자 라이브러리)를 도입해서 상태를 관리할 때는,

라이브러리가 쓰여야하는 명확한 이유와 그 쓰임새에 대해 생각해보아야한다.

 

 

상태관리를 왜 할까?

리액트는 가상돔을 이용한다.

컴포넌트가 변화할 때 리렌더링이 되는데 가상돔에서 변경된 부분만 캐치해서 실제 돔에 반영시켜준다.

이러한 리렌더링을 통해 변경된 값을 확인할 수 있다.

리액트에서는 이것을 위한 상태관리가 필요하다.

 

예를 들어, 서로 다른 두 컴포넌트에 같은 데이터가 필요하다고 할 때,

각 컴포넌트가 부모 자식 관계로 되어 있지 않은 이상 직접적인 데이터 전달이 어렵다.

데이터를 부모 컴포넌트로 보내고 다시 필요한 컴포넌트로 전달해야 하는데,

이렇게 Prop Drilling이 많아지면 이 Prop이 어디에서 왔는지 확인하기가 어렵기 때문에 상태관리를 해야한다.

 

어플리케이션에서 전역적으로 바라볼 수 있는 상태를 관리하기 위한 라이브러리로 Redux와 Mobx가 있는데,

Redux가 가장 대중적으로 사용 된다.

 

 

상태관리 라이브러리가 왜 필요한가?

리액트 자체만으로 해결하기 어려운 해결책을 제공하기 때문이다.

여러 컴포넌트가 공통으로 사용할 상태를 서로 공유해야 할 시점에 복잡한 구조와 계층이 생기기 시작한다.

전역으로 다루어야 할 상태가 생겼을 때, 라이브러리 도입에 대해 생각한다.

 

리액트에서 Context API가 도입됨에 따라 어느정도 해소가 되긴 했지만, 아직 성능 이슈가 존재한다.

값에 변화가 생겼을 때 Context를 구동하고 있는 모든 컴포넌트들이 전체적으로 모두 리렌더링이 되기 때문에

반복적이고 복잡한 업데이트와 관련된 부분에서는 비효율적일 수 있다.

 

리덕스의 경우, 자체적으로 리렌더링과 관련된 부분에 최적화 되어있기 때문에 부분적인 리렌더링이 발생한다.

또, 리덕스를 사용하면 Context API에선 제공할 수 없는 다양한 기능을 미들웨어를 사용해 관리할 수 있다.

 

적절한 상태관리 라이브러리 도입은 개발 생산성을 높여주고 동시에 상태 관리와 관련된 여러 편의성을 가져다 줄 수 있다.

다만, 어떤 상태 관리 라이브러리를 사용할 지에 대해 고민하기 전에, 왜 상태관리 라이브러리가 필요한지 생각해보고 도입하는 것이 좋을 것 같다.

 

---

참고

[FE] 리액트 상태관리 1부.

React에서 상태 관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?

리액트에서 상태관리가 필요한 이유