리액트를 안쓰고 vue를 쓴 이유.(feat.원웨이/투웨이 바인딩, flutter)

1. 리액트

리액트 대신 vue.js를 공부하는 이유

: 리액트는 '보안'상의 이유로, 원웨이 바인딩을 채택했다.

코드양이 많아질 수 밖에 없다.

 

2. vue

: 투웨이 바인딩을 채택했다.

코드양이 그래서 적다.

 

그럼 원웨이/투웨이 바인딩이 뭔가요?

 

이름에서 알 수 있듯이,

길이 하나, 두개의 차이이다.

바인딩은 즉, '바운더리'처럼 '값'을 주는 것을 이야기한다.

 

원웨이 바인딩은

값이 하나 있으면, 가져다 써야할 때 일방적으로 그 값을 알고 있어요.

특정 컴포넌트가 있고, 컴포넌트에 값이 있을 때

 

컴포넌트가 A일 때는 네모, B일 때는 세모를 표시해주고 싶다고하면

맨 처음 컴포넌트 '쳐다봐야해!'라고 하고, 음 네모네? ㅎ고 네모를 뿌려요.

값을 강제로 B로 바꿀 때는 그대로 네모예요. 왜 네모일까요?

나... 바뀌었어!! 라고 다시 또 보라고 해줘야돼요. 말 안하면 몰라요.

 

flutter에서 setState 했던거.. 

 

쟤 바뀌었는지 아닌지 다시 봐야한다?! 라고 했던게 setState한 거예요.

값이 바뀔 때마다 setState를 계속 했던 것처럼..

 

이거 쓰는애들아~ 이거 다시가져가~라고 매번 말해줘야하는게 원웨이바인딩이에요.

 

한번 보면 끝! 입니다.

 

 

투웨이 바인딩은

값이 A 일때는 네모, B일때는 세모라고하면.

 

v-model이라는걸로 탁 집어줘요. 둘이 사랑하는 사이처럼 굳이 말하지 않아도 

오 바꿨으니까 나도 바꿔야지~ 라고 값을 바꾸면 자동으로 같이 바뀌는 구조인거예요.

 

예시

---

++ 좀더 구체적으로 정리한다.

원웨이 : 단방향 데이터 변경 (ex: react)

투웨이 : 양방향 데이터 변경

https://velog.io/@kimju0913/%EB%8B%A8%EB%B0%A9%ED%96%A5-%EB%B0%94%EC%9D%B8%EB%94%A9%EA%B3%BC-%EC%96%91%EB%B0%A9%ED%96%A5-%EB%B0%94%EC%9D%B8%EB%94%A9

단방향 바인딩과 양방향 바인딩