양방향 데이터 바인딩(각도)과 단방향 데이터 흐름(React/Flux)
지난 주, 저는 양방향 데이터 바인딩(Angular)과 단방향 데이터 흐름(React/Flux)이 어떻게 다른지 이해하려고 노력했습니다.단방향 데이터 흐름은 더 강력하고 이해하기 쉽고 결정론적이며 부작용을 피하는 데 도움이 된다고 합니다.하지만 제 초보자의 눈에는 둘 다 거의 비슷하게 보입니다. 뷰는 모델의 소리를 듣고 모델은 뷰에 수행된 액션에 반응합니다.둘 다 그 모델이 진실의 유일한 원천이라고 주장한다.
서로 정말 다른 점, 단방향 데이터 흐름이 어떻게 더 유익하고 쉽게 추론할 수 있는지 포괄적으로 설명할 수 있는 사람이 있을까요?
Angular의 양방향 데이터 바인딩
뷰와 모델이 변경될 때마다 동기화하는 메커니즘에 의해 가능합니다.Angular에서 변수를 업데이트하면 변경 감지 메커니즘이 보기를 업데이트하며, 그 반대의 경우도 마찬가지입니다.문제가 뭐죠?변경 감지 메커니즘을 제어할 수 없습니다.뷰를 강제로 업데이트하기 위해 ChangeDetectorRef.detectChanges 또는 NgZone.run을 사용해야 했습니다.
Angular에서 변경 감지에 너무 깊이 관여하지 않기 위해 변수를 변경할 때 또는 관측 가능한 해결 후에 변수가 변경되면 필요한 정보가 업데이트되지만 실행 방법과 시간은 알 수 없으며 변수가 변경된 후에도 보기가 업데이트되지 않을 수 있습니다.말할 필요도 없이, 문제가 발생한 장소와 시간을 찾는 것이 때로는 고통스러울 수 있습니다.
반응의 단방향 데이터 흐름
즉, 뷰는 항상 모델에서 상태를 가져옵니다.보기를 업데이트하려면 먼저 모델을 업데이트한 다음 보기를 다시 그려야 합니다.React는 실제 DOM이 아닌 메모리에 저장된 가상 DOM을 비교하기 때문에 뷰 재드로잉 프로세스를 매우 효율적으로 만듭니다.그러나 이 동적 환경에서 변경 감지는 어떻게 작동합니까?음, 수동으로 작동시키죠
React에서 상태의 새 값을 설정합니다. 그러면 ReactDOM.render가 발생하여 DOM 비교/업데이트 프로세스가 발생합니다.React/Redux에서는 스토어(단일 진실 소스)를 업데이트하는 작업을 디스패치하고 나머지는 디스패치합니다.요점은 언제 변화가 일어나는지, 무엇이 변화의 원인인지 항상 알고 있다는 것입니다.이렇게 하면 문제를 쉽게 해결할 수 있습니다.앱이 상태에 따라 달라지는 경우 변경을 트리거한 작업 전후에 앱을 살펴보고 변수가 원하는 값을 갖는지 확인합니다.
구현은 별개로
플랫폼에 의존하지 않는 관점에서 보면, 이 두 가지가 크게 다르지 않습니다.단방향 흐름과 양방향 바인딩을 구분하는 것은 변경 시 가변 업데이트입니다.그래서 개념적으로 그들이 서로 너무 멀리 있지 않다는 당신의 인상은 그들의 실용성과 크게 다르지 않다.
각도에는 여러 개의 컨트롤러가 있습니다.예를 들어 컨트롤러 1에 의해 관리되는 View 1에서 작업을 트리거하는 사용자가 있습니다.컨트롤러 1은 어떤 작업을 수행하지만 다른 컨트롤러 2에 의해 포착된 이벤트도 실행합니다.컨트롤러 2가 $scope의 일부 속성을 업데이트하고 View 2가 갑자기 변경됩니다.
갑자기 View 1에 대한 작업이 이루어졌고 View 2가 업데이트되었습니다.여기서 비동기 콜백과 이벤트체인을 조금 더 투입하면 뷰가 언제 어떻게 갱신되고 있는지 정확하게 알 수 없게 될 수 있습니다.
Flux/Redux를 사용하면 단방향 데이터 흐름을 실현할 수 있습니다.뷰는 모델을 업데이트하지 않고 뷰는 작업(업데이트 의도)만 디스패치할 수 있지만 스토어/리듀서는 업데이트 처리 방법을 결정할 수 있습니다.각 보기에서 실행할 수 있는 작업을 쉽게 확인할 수 있으므로 데이터 흐름에 대해 보다 쉽게 추론할 수 있습니다.그런 다음 스토어에서 해당 작업이 어떻게 처리되고 있는지 확인하면 업데이트할 수 있는 내용을 정확하게 알 수 있습니다.
여기서의 데이터 흐름은 쓰기 이벤트 흐름(상태 업데이트 등)입니다.
이러한 이벤트는 뷰와 컨트롤러(및 HTTP 백엔드 등의 서비스) 간에 흐릅니다.
단방향 흐름은 기본적으로 큰 사이클입니다.
- 앱 뷰 렌더링에 앱 상태 사용(쓰기 없음)
- 응용 프로그램이 외부에서 자극을 받으면(사용자가 입력 필드에 텍스트를 입력했거나 HTTP 요청 결과가 도착함), 쓰기 이벤트를 발생시키거나 Redux/Flux 속어로 액션을 디스패치합니다.
- 모든 컨트롤러와 뷰에서 모든 이벤트가 단일 싱크 디스패치 기능(디시저)으로 유입되며, 디스패치 기능의 특성상 단순한 디스패치 기능에서 구성할 수 있지만 개념적으로는 앱 전체에 디스패처는 1개뿐입니다.
- 디스패처는 이벤트를 사용하여 상태의 어느 부분을 갱신할지를 판단합니다.
- 시작으로 가라.
양방향 흐름 데이터 바인딩은 대부분의 경우 컨트롤러 내부(예: 일부 변수)와 뷰 내부(예: 텍스트 상자의 내용)의 두 가지 상태를 바인딩합니다.바인딩이란 한 조각이 변경되면 다른 조각도 변경되어 동일한 값을 얻는 것을 의미하기 때문에 하나의 상태(실제로는 두 개)가 관련된 것으로 간주할 수 있습니다.쓰기 이벤트는 컨트롤러와 뷰 사이를 왔다 갔다 합니다. 즉, 양방향입니다.
데이터 바인딩은 어떤 변수가 이 특정 텍스트 상자의 내용을 보관하고 있는지 파악해야 할 때 유용합니다. 즉,하지만 실제로는 두 조각이 있는 상태의 한 조각이라는 환상을 유지하기 위해서는 복잡한 프레임워크가 필요합니다.일반적으로 프레임워크별 구문을 사용하여 뷰의 코드를 작성해야 합니다.즉, 다른 언어를 학습해야 합니다.
단방향 데이터 흐름은 추가 엔티티인 이벤트 흐름을 활용할 수 있을 때 냉각됩니다.또한 보통 실행 취소/재설정, 사용자 작업 재생(디버깅 등), 복제 등에 유용합니다.이를 지원하는 코드는 훨씬 더 단순하며 일반적으로 프레임워크 고유의 구문 대신 일반 JavaScript로 작성될 수 있습니다.한편, 데이터 바인딩이 없어졌기 때문에 보일러 플레이트를 절약할 수 없게 되었습니다.
또, 다음의 회답에서는, 비주얼에 관한 상세한 설명을 참조해 주세요.https://stackoverflow.com/a/37566693/1643115단방향 및 양방향 화살표는 각각 단방향 및 양방향 데이터 흐름을 시각적으로 나타냅니다.
앱이 마법사 흐름일 뿐이지만 복잡한 상호 작용이 있다고 가정해 보겠습니다. 즉, 한 단계로 인해 다음 단계 동작이 변경될 수 있습니다.
당신의 앱은 잘 작동하고 있지만, 어느 날 사용자가 까다로운 단계 중 하나에서 버그를 보고합니다.
쌍방향 바인딩 및 단방향 바인딩 디버깅은 어떻게 작동합니까?
쌍방향 바인딩
어떤 동작이 다른지 확인하고 운 좋게 사용자와 같은 지점에 도달하여 버그를 특정합니다.하지만 동시에 앱의 다른 부분들 사이에 이상한 상호작용이 있을 수 있습니다.잘못된 데이터 바인딩(모델 상태를 복제하지만 바인딩하지 않는 등)이나 컴포넌트 간에 디버깅하기 어려운 기타 이상한 복잡성이 있을 수 있습니다.버그를 분리하는 것은 어려울 수 있습니다.
단방향 바인딩
넌 그냥...state물건.현재 앱의 모든 정보를 큰 Javascript 오브젝트에 담고 있습니다.개발 환경에 동일한 상태를 로드하면 앱이 정확히 동일하게 동작할 가능성이 높습니다.회귀에 대한 특정 상태의 검정을 작성하고 발생한 문제를 정확하게 파악할 수도 있습니다.
결론
한마디로 단방향 바인딩을 통해 복잡한 앱을 쉽게 디버깅할 수 있습니다.사용자의 현재 상태를 복사하는 것보다 더 많은 작업을 수행할 필요가 없습니다.
동작하지 않는 경우에도, 조작을 로그에 기록할 수 있습니다.예를 들어 AFIR는 Angular의 모든 상태 수정 액션을 추적하는 쉬운 방법은 없습니다.Redux를 사용하면 매우 간단합니다.
언급URL : https://stackoverflow.com/questions/34565568/two-way-data-binding-angular-vs-one-way-data-flow-react-flux
'programing' 카테고리의 다른 글
| 네트워크 인터페이스 이름의 길이는 몇 개입니까? (0) | 2023.03.18 |
|---|---|
| wordpress : 페이지에 카테고리와 태그를 추가하는 방법 (0) | 2023.03.18 |
| openweathermap.org JSON에서 반환되는 온도(섭씨)는 어떻게 계산합니까? (0) | 2023.03.18 |
| dbms_blob.getlength() vs. length()를 사용하여 Oracle에서 BLOB 크기를 검색합니다. (0) | 2023.03.18 |
| 레일에서 뷰를 사용하여 JSON을 렌더링하려면 어떻게 해야 합니까? (0) | 2023.03.18 |