[React] 상태관리란 무엇인가?

🎯 상태 관리

• 상태 관리 기술이란 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것이다.
• 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함한다.

 

📝 MPA와 SPA에서의 상태 관리

• MPA에서는 서버의 데이터를 이용해 페이지를 렌더링 하므로, 클라이언트의 데이터와 서버의 데이터가 큰 차이를 가지지 않는다.
• SPA에서는 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리한다. 그 외의 데이터는 Client만의 데이터로 유지한다.

 

📝 상태 관리 기술의 도입

• 상태가 많지 않거나, 유저와의 인터렉션이 많지 않다면 매 작업 시 서버와 동기화하더라도 충분하다.
• 앱이 사용하는 데이터가 점점 많아지고, 유저와의 인터렉션 시 임시로 저장하는 데이터가 많아지는 경우 상태 관리를 고려할 수 있다.
• 프론트엔드뿐만 아니라, 백엔드와의 데이터 통신도 충분히 고려해야 한다.
  • ex) GraphQL

 

📝 상태 관리 기술의 장점

• 높은 품질의 코드를 작성하는 데 유리하다.
• 성능 최적화, 네트워크 최적화 등에 유리하다
• 데이터 관리의 고도화
  • ex) localStorage 활용한 persist state

 

📝 상태 관리 기술의 단점

• Boilerplate 문제
• 파악해야 할 로직과 레이어가 많아진다.
• 잘못 사용할 경우 앱의 복잡도만을 높이거나, 성능을 악화시킬 수 있다.
  • ex) global state의 잘못된 활용 시 앱 전체 리렌더링 발생