📍 상태란?

• 어떠한 의미를 지닌 값이며 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미
• URL도 상태값임. 브라우저에서 관리되고 있는 상태값!
  • ex. https://www.airbnb.co.kr/rooms/123?adults=2 => 상태값: roomId=123, adults=2

📍 tearing

• 하나의 상태에 따라 서로 다른 결과물을 사용자에게 보여주는 현상

🎁 단방향 데이터 흐름의 장단점

• 장점
  • 데이터의 흐름은 모두 액션이라는 한 방향(단방향)으로 줄어들므 로 데이터의 흐름을 추적하기 쉽고 코드를 이해하기가 한결 수월해짐
• 단점
  • 사용자의 입력에 따라(여기에서는 사용자의 클릭에 따라) 데이터를 갱신하고 화면을 어떻게 업데이트해야 하는지도 코드로 작성해야 하므로 코드의 양이 많아지고 개발자도 수고로워짐
• 리액트는 대표적인 단방향 데이터 바인딩을 기반으로 한 라이브러리

🎁 양방향 데이터 흐름의 장단점

• 장점
  • 모델과 뷰가 서로를 자동으로 업데이트하기 때문에 개발자가 수동으로 동기화할 필요가 없어 개발이 더 빠르고 간편해짐
  • 사용자 인터페이스와 데이터 모델 간의 연동이 직관적이고 즉각적으로 반영되므로 복잡한 상호작용을 쉽게 구현할 수 있음
• 단점
  • 데이터 흐름을 추적하기 어렵고 디버깅이 복잡해질 수 있음. 데이터가 여러 컴포넌트를 거쳐 양방향으로 흐르면서 어디서 데이터가 변경되었는지 파악하기 어려움
  • 뷰와 모델이 밀접하게 결합되어 있어서, 애플리케이션 규모가 커지면 유지 보수와 확장성이 떨어질 수 있음

📍 리액트 상태 관리의 역사

• 단순히 UI를 만들기 위한 라이브러리였음
• 웹 애플리케이션이 비대해짐에 따라 상태를 추적하기 어려워짐 (양방향 데이터 바인딩이어서)
• MVC 패턴 -> 양방향 데이터 바인딩의 문제를 해결하고자 단방향 데이터 흐름인 Flux 패턴 등장

📍 Elm

• 웹페이지를 선언적으로 작성하기 위한 언어
• 핵심: model, view, update
• Flux와 마찬가지로 데이터의 흐름을 세 가지로 분류하고, 이를 단방향으로 강제해 웹 애플리케이션 의 상태를 안정적으로 관리하고자 노력