79. Understanding State
npm create vue@latest
여기서부터는 앱을 기능적으로 만들어야됩니다.
하지만 어디서부터 시작해야 할까요?
다룰 영역이 너무 많습니다.
저는 항상 사용자 시스템부터 시작하는 것을 선호합니다.
대부분의 어플리케이션은 용도에 관계없이 사용자 시스템에 의존합니다.
누가 업로드하는지 알아야만 노래를 업로드할 수 있습니다.
이것은 앱의 필요에 따라 달라집니다.
이 예제에서는 좋은 시작점이 될 것 같습니다.
사용자가 있으려면 사용자를 저장하고 관리할 수 있어야 합니다.
인증하거나 등록할 방법이 필요합니다.
인증과 등록은 좋은 시작점입니다.
우리는 사용자 시스템으로 시작할 것입니다.
로직 코딩을 시작하기 전에 '상태'라고 불리는 것을 이해해야 합니다.
'상태'라는 단어는 자바스크립트 세계에서 많이 사용됩니다.
하지만 이것이 정확히 무엇을 의미할까요?
상태는 애플리케이션의 데이터를 가리킵니다.
이는 데이터베이스나 API에서 검색한 데이터일 수 있으며, 블로그 게시물, 제품 또는 미디어 콘텐츠와 같은 데이터일 수 있습니다.
상태는 애플리케이션 데이터를 저장하는 데에도 사용할 수 있습니다.
데이터베이스에 일반적으로 저장하지 않는 특정 유형의 데이터가 있습니다.
그러나 이 데이터는 앱이 올바르게 작동하는 데 필요합니다.
에를 들어, 간단한 드롭다운입니다.
사용자가 드롭다운 버튼을 클릭하면 해당 드롭다운의 내용이 표시되어야 합니다.
그들이 드롭다운에서 멀어지면 내용이 숨겨져야 합니다.
이러한 유형의 데이터를 추적해야 합니다.
또 다른 예는 사용자가 현재 어느 페이지에 있는지 추적하는 것입니다.
홈페이지인지 연락처 페이지인지에 따라 다른 콘텐츠를 표시합니다.
vue 컴포넌트에 data 함수를 추가하여 데이터를 저장하는 방법을 제공합니다.
이것이 틀린 것은 아니지만, 하나의 단일한 진실의 원천을 가지는 것이 좋은 관행으로 여겨집니다.
이 모든 것이 애플리케이션의 상태로 간주됩니다.
'상태'라는 단어를 들었을 때, 다른 방식으로 말하면 데이터입니다.
사용자의 브라우저에서 애플리케이션이 실행되는 동안 신중하게 추적되는 데이터입니다.
사용자가 홈 페이지에 있다면, 이를 '홈 상태'라고 부를 수 있습니다.
로그인 중이라면, 이를 '인증 상태'라고 부를 수 있습니다.
이것은 현재 애플리케이션에서 일어나고 있는 일을 설명하는 데 사용됩니다.
따라서 상태를 데이터베이스에서 오는 데이터라고만 생각하지 마세요.
또한 작은 것들을 추적하는 데이터도 포함합니다.
이 강의에서는 data 속성을 사용하여 사항을 추적하는 방법을 사용했습니다.
data 속성은 로컬 상태를 저장하는 방법으로 간주할 수 있습니다.
하지만 여러 컴포넌트에 걸쳐 데이터를 공유해야 할 필요가 있다면 어떻게 해야 할까요?
글로벌 상태가 필요합니다.
글로벌 상태는 여러 컴포넌트에 걸쳐 공유되는 데이터입니다.
다른 컴포넌트로 데이터를 전달하기 위해 props를 사용하거나, 부모 컴포넌트로 데이터를 보내기 위해 콜백 함수나 이벤트를 사용할 수 있습니다.
이 예에서, 데이터를 자식 컴포넌트 B와 C에서 사용한다고 가정해 봅시다.
자식 컴포넌트 C는 데이터를 업데이트할 수 있습니다.
데이터를 업데이트하려면 부모 컴포넌트로부터 콜백 함수를 자식 컴포넌트 A에 전달한 다음 C에 전달해야 합니다.
자식 컴포넌트 C는 콜백 함수를 사용하여 부모 컴포넌트 내의 데이터를 업데이트할 수 있습니다.
그런 다음 업데이트된 데이터가 컴포넌트 B로 전송됩니다. 이것이 일반적인 데이터 흐름입니다.
지금까지 우리가 해 온 것입니다. 소규모에서 중간 규모의 애플리케이션에서는 이 방법이 잘 작동합니다.
모든 것을 전달해야 하는 것이 약간 성가실 수 있지만, 확실히 실행 가능하고 관리하기 쉽습니다.
하지만, 더 큰 애플리케이션에서는 글로벌 상태를 관리하는 과정이 매우 번거로워질 수 있습니다.
만약 애플리케이션에 10개의 컴포넌트 계층이 있다면, 콜백 함수를 10번 전달해야 합니다.
이것은 재미있지 않습니다.
다행히도, Vue는 전역 수준에서 상태를 관리하기 위해 자체 라이브러리를 만들 수 있게 해줍니다.
우리는 그 방법을 사용하지 않을 것입니다.
그렇게 할 필요가 없기 때문입니다.
대신 이미 이를 위한 라이브러리들이 있습니다.
가장 인기 있는 해결책은 Vuex입니다.
Vuex는 데이터를 중앙 위치에 저장하는 라이브러리입니다.
컴포넌트에서 컴포넌트로 데이터를 전달할 필요가 없습니다.
상태는 모든 컴포넌트에 직접 접근할 수 있습니다.
컴포넌트가 얼마나 깊이 중첩되어 있든, 데이터는 검색되거나 업데이트될 수 있습니다.
데이터에 대한 변경 사항은 모든 컴포넌트에 반영됩니다.
이는 더 이상 여러 자식 컴포넌트를 통해 데이터를 전달할 필요가 없음을 의미합니다.
데이터는 한 곳에서 중앙 집중적으로 처리됩니다.
Vuex는 Vue의 핵심 개발자들에 의해 관리됩니다.
호환성 문제에 대해 걱정할 필요가 없습니다.
이 강의에서는 이 라이브러리를 사용할 것입니다.
중요한 점을 강조하고 싶습니다.
중앙 집중화된 상태는 완전히 선택적입니다.
설치되어 있다고 해도, 때때로 단일 컴포넌트에서만 사용될 데이터가 있을 것입니다.
다른 컴포넌트로 전달할 계획이 없다면, 중앙 집중화된 상태 안에 저장할 필요가 없습니다.
중앙 집중화된 상태 컴포넌트는 여전히 자체 데이터 세트를 가질 수 있습니다.
이것을 이해하는 것이 중요합니다.
상태를 불필요하게 어지럽히고 싶지는 않을 것입니다.
이로써, 상태 관리에 대한 기본적인 이해를 마치고, 이제부터 Vue 애플리케이션에서 상태 관리를 어떻게 구현할 것인지 살펴볼 것입니다.