Angular 애플리케이션의 상태(State)는 브라우저 새로고침 시 데이터가 사라지는 이유는 애플리케이션의 메모리와 브라우저 세션 관리 및 하드웨어와의 관련성에 기인합니다. 이를 상세하게 설명하겠습니다:
-
메모리와 관련성:
-
브라우저의 메모리: 브라우저는 애플리케이션을 실행하는 데 필요한 데이터를 메모리에 보관합니다. 이 메모리는 브라우저의 세션(탭 또는 창) 동안 유지됩니다. 새로고침을 하면 현재 세션이 종료되고 새로운 세션이 시작됩니다. 따라서 메모리에 저장된 데이터는 새로운 세션에서는 유지되지 않으며 사라지게 됩니다.
-
LocalStorage: 코드에서 사용된
localStorage.getItem()은 브라우저의 영구적인 로컬 스토리지에 저장된 값을 가져오는 기능입니다. 하지만 LocalStorage는 브라우저의 세션에 상관없이 영구적으로 데이터를 저장합니다. 새로고침을 하더라도 LocalStorage에 저장된 데이터는 지워지지 않고 유지됩니다. 따라서localStorage를 사용하면 브라우저 세션이 종료되어도 데이터가 사라지지 않습니다.
-
-
브라우저 세션 관리:
-
브라우저 세션: 사용자가 웹 애플리케이션을 실행할 때 브라우저는 새로운 세션을 시작합니다. 세션은 브라우저 탭 또는 창이 열리고 닫힐 때 생성 및 종료됩니다. 각 세션은 독립적으로 동작하며, 새로운 세션에서는 이전 세션의 데이터를 공유하지 않습니다.
-
상태(State) 관리: 애플리케이션의 상태는 메모리에 저장되는데, 이 상태는 브라우저 세션 동안만 유지됩니다. 브라우저 새로고침 시 이전 세션의 상태가 모두 사라지고, 새로운 세션이 시작되면서 상태가 초기화됩니다. 따라서 새로고침을 하면 상태(State)가 메모리에서 사라지고 이전 상태는 복원되지 않습니다.
-
-
하드웨어와 관련성:
- 브라우저는 하드웨어의 자원을 활용하여 애플리케이션을 실행합니다. 하지만 하드웨어의 자원은 영구적인 데이터를 저장하거나 유지하는데 사용되지 않습니다. 따라서 애플리케이션의 상태는 주로 메모리에 저장되는데, 하드웨어의 제한된 영구 저장소(예: 하드 디스크)를 사용하지 않고 메모리를 활용합니다.
요약하면, Angular 애플리케이션에서 사용되는 상태(State)는 브라우저의 메모리에 저장되며, 브라우저 세션 동안에만 유지됩니다. 브라우저 새로고침 시 이전 세션의 상태가 사라지기 때문에 데이터가 날아가는 것입니다. 만약 영구적으로 데이터를 보존해야 한다면 LocalStorage와 같은 영구 저장소를 사용해야 합니다.
