React는 왜 단방향으로만 데이터를 전달할 수 있을까? (부모 -> 자식)

---

React의 데이트 흐름

React는 기본적으로 데이터 즉. props를 단방향으로 전달한다. 

 

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. 이는 React의 핵심 개념중 하나인 "단방향 데이터 흐름"을 나타낸다.

 

부모 컴포넌트에서 자식컴포넌트로 props를 내릴 수 있지만, 자식 컴포넌트에서 직접적으로 부모 컴포넌트의 상태를 변경할 수 없다. 자식 컴포넌트에서 상위 컴포넌트로 데이터를 다시 전달하려면 콜백 함수 또는 이벤트를 사용하여 부모 컴포넌트에서 처리해야 한다. 

 

 

React는 단방향 데이터 바인딩이 되는 이유

결론은 애플리케이션의 상태를 예측 가능하고 디버깅하기 쉽게 만들기 위함이다. 

 

1. 예측 가능한 데이터 흐름:
   • 단방향 데이터 흐름은 데이터의 흐름이 항상 한 방향으로만 이동하도록 한다. 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되는 방향이다. 이로 인해 데이터의 흐름이 예측 가능하며, 컴포넌트 간의 의존성이 명확하게 드러난다.
2. 디버깅 용이성:
   • 데이터 흐름이 한 방향으로만 이동하면 디버깅이 간단해진다. 특정 컴포넌트에서 데이터의 변경이 발생하면, 그 변경이 일어난 부모 컴포넌트에서부터 디버깅을 시작할 수 있다.
3. 컴포넌트의 독립성:
   • 단방향 데이터 흐름은 각 컴포넌트가 독립적으로 작동하도록 장려한다. 자식 컴포넌트는 부모로부터 전달받은 props를 통해 데이터에 접근하고 수정할 수 없다. 이는 컴포넌트 간의 결합도를 낮추고 재사용성을 향상시킨다.
4. 유지보수 용이성:
   • 애플리케이션이 성장하고 복잡해지면서 상태 관리와 데이터 흐름을 이해하기 쉽게 만들기 위해 단방향 데이터 흐름은 유지보수성을 높인다.

 

개발자에게 일관성있고 예측 가능한 경험을 제공하기 위함에 따라 단방향으로만 데이터 바인딩이 되도록 설계되었다.

 

 

---

 

그렇다면 다른 프레임워크들은 ..? 

 

프레임워크 차이 

Angular

Google에서 개발한 프레임워크. TypeScript 기반의 오픈 소스 프레임워크다. 

 

AngularJS의 후속 제품으로 다음과 같은 특징이 있다. 

 

1. TypeScript 기반:
   • Angular는 TypeScript를 기반으로 개발되었다. TypeScript는 정적 타입 언어로, JavaScript에 타입 정보를 추가하여 코드의 안정성과 가독성을 향상시킨다.
2. 컴포넌트 기반 아키텍처:
   • Angular는 컴포넌트 기반 아키텍처를 채택하고 있다. 애플리케이션은 여러 개의 컴포넌트로 구성되며, 각 컴포넌트는 자체적으로 독립적인 기능을 수행하며 재사용 가능하다.
3. 양방향 데이터 바인딩:
   • Angular는 양방향 데이터 바인딩을 지원하여 모델과 뷰 간의 상호 작용을 용이하게 한다. 데이터의 변경이 자동으로 화면에 반영되고, 화면에서의 사용자 입력이 모델을 업데이트할 수 있다.
4. 의존성 주입:
   • Angular는 의존성 주입(Dependency Injection)을 사용하여 컴포넌트 간의 의존성을 관리한다. 이는 코드의 재사용성과 테스트 용이성을 향상시키며, 애플리케이션의 전체적인 유지보수를 간편하게 만든다.
5. 루트 모듈과 모듈 시스템:
   • Angular 애플리케이션은 루트 모듈을 기반으로 모듈 시스템을 사용하여 구조화된다. 이를 통해 코드를 모듈 단위로 나누고 관리할 수 있으며, 모듈 간의 의존성을 선언적으로 정의할 수 있다.
6. 라우팅:
   • Angular는 내장된 라우터를 제공하여 애플리케이션 내의 다양한 뷰와 상태를 관리할 수 있다. 이를 통해 싱글 페이지 애플리케이션(SPA)을 구축할 수 있다.

 

여기서 중요하게 봐야할 부분은 양방향으로 데이터 바인딩을 지원하여 상호 작용을 용이하게 한다는 점이다. 

 

 

Vue

vue는 JavaScript기반의 프레임워크로 MVVM(Model-View-ViewModel) 아키텍처를 기반으로 한다. 

 

다음과 같은 특징이 있다.

1. 컴포넌트 기반 아키텍처:
   • Vue.js는 컴포넌트 기반의 아키텍처를 채택하고 있다. 애플리케이션은 작은 단위인 컴포넌트로 나누어져 있으며, 각 컴포넌트는 재사용 가능하고 독립적으로 구성된다.
2. 반응성 데이터 바인딩:
   • Vue에서는 양방향 데이터 바인딩과 단방향 데이터 바인딩을 모두 지원한다. 데이터의 변경이 자동으로 화면에 반영되며, 화면에서의 사용자 입력이 모델을 업데이트할 수 있다.
3. 가상 DOM:
   • Vue는 가상 DOM을 사용하여 효율적인 화면 업데이트를 지원한다. 가상 DOM은 실제 DOM과 동기화되어 있으며, 변경된 부분만을 실제 DOM에 반영하여 성능을 최적화한다.
4. 디렉티브:
   • Vue에서는 디렉티브를 사용하여 HTML 요소에 특별한 동작을 부여할 수 있다. 예를 들면, v-if, v-for, v-bind, v-on 등이 있다.
5. 라우팅:
   • Vue는 Vue Router를 통해 라우팅을 지원한다. 이를 사용하여 싱글 페이지 애플리케이션(SPA)을 쉽게 구현할 수 있다.
6. 상태 관리:
   • Vue는 상태 관리를 위해 Vuex라는 라이브러리를 제공한다. Vuex는 중앙 집중식 상태 관리를 통해 여러 컴포넌트 간의 상태를 효율적으로 관리할 수 있게 한다.
7. 커뮤니티와 생태계:
   • Vue는 활발한 커뮤니티와 다양한 생태계를 가지고 있다. 많은 개발자들이 기여하고 있어 풍부한 리소스와 라이브러리를 활용할 수 있다.