inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React & Express 를 이용한 웹 어플리케이션 개발하기

Redux: 배경지식 | MVC, FLUX

MVC의 문제점을 REDUX가 어떻게 해결해주는지 초보자는 이해하기 어렵습니다.

273

BK

작성한 질문수 2

0

안녕하세요 강의 잘 보고 있습니다. Front-end의 MVC에 문제상황이 있다는 건 알 수 있지만 그 문제를 경험해보지 않은 사람들은 강의만 보고 문제를 이해할 수가 없어요 ㅠㅠ 페북의 예는 "문제가 생길 순 있겠다~"정도로 이해가 가지만 정확히 어떤 문제가 있는지가 궁금해지더라구요. 아마도 양방향 바인딩이 이슈인 것 같은데요, 그 부분에 대한 설명이 있다면 이해가 쉬워질 것 같습니다. 만약 이것이 맞다면 이것을 REDUX가 어떻게 해결하는지도 포인트를 다른데 두어야 하는 것 아닌가 해요 양방향 바인딩이 단방향으로 된 부분이 포인트가 아닌가요? 여러개의 모델과 여러개의 뷰 끼리 변화를 주던 것을 한곳에서 통제할 수 있게 되었다는 것도 포인트인 것 같은데요. 확신이 서질 않아서 글 남깁니다.

react

답변 1

2

velopert(김 민준)

  양방향 데이터 바인딩은 상태가 업데이트되면 뷰가 업데이트되고, 그 반대로 뷰가 업데이트되면 상태가 업데이트 됩니다. AngularJS 1 에서 model 에 변화를 주면 뷰도 자동으로 반영이되죠. 그리고, view 에 있는 input 필드를 수정하면 그 값이 수정이 되는대로 모델의 값이 변합니다.   이러한 구조는 많은 앱에서 제대로 작동하긴 합니다.  흐름을 시각적으로 보자면 이런느낌이죠 뷰 <-----------> 상태   여기서 상태가, 뷰에 의해서 변할수도있고, 컨트롤러에 의하여 변할 수도 있다보니, 가끔씩은 데이터 흐름을 예상하기가 힘듭니다.   하지만 Flux 구조를 사용한다면 state 는 action 을 dispatch를 해야만 업데이트 할 수 있구요, 이 state 에 변화가 있을때마다 자동으로 뷰가 re-render 됩니다.   상태가 같다면, 언제나 같은 결과를 렌더링하겠죠. 따라서, 상태에 따라 어떤 뷰가 보여질지 예상을 할 수 있는 방면, 양방향데이터는 예측할수가없죠. 각각 자신의 model 을 지니고있으니까요.      흐음... 저도 사실 어떻게 설명을 해야 이해하기 쉬울지 모르겠습니다.   머릿속에서 큰그림은 그려지는데 딱 명확하게 설명드리기가 어렵네요.   Redux 의 중요 포인트는 말씀하신대로 1) 단방향 데이터 흐름 2) 한개의 스토어에서 모든걸 관리한다는것 입니다.   컴포넌트들이 부모 - 자식 트리 구조로 이뤄져있고, 객체형태로 store 에 상태가 담겨있기 때문에 궁합이 잘 맞고, 그 store 안의, state 에 따라 언제나 같은 뷰가 생성된다는것 정도만 이해하시고 Redux 를 사용해보시면서,   이 구조가 어떻게 편한지, 혹은 자신에게 잘 안맞는지 판단을 해보시는게 좋을것같습니다 (저는 굉장히 편하다고 생각하는데 사람마다 다르니까요. 저도 처음 사용할때는, 이걸 왜 굳이 사용해야 하나 싶었는데, 개인 프로젝트에서 사용을 해보면서 정말 정말 정말 중요하는걸 깨달았습니다.   궁금증이 조금이나마 해결되었으면 좋겠습니다.     

잘 배우고있었는데 ㅠㅠ

0

292

1

react hot reloader

0

191

1

this.props.name할때

0

173

1

시작부터 안됩니다.

1

481

2

초급 유료버전과 차이점은 무엇인가요?

0

338

1

localStorage 강좌에서 componentwillmount 관련 질문입니다.

0

360

1

아무것도 뜨지 않아요

0

567

4

아래 화면에 선생님처럼 Codelab이 안뜹니다. 수업진행이 안되네요

0

510

2

쌤 리액트로 앱 만들수 있는건가요?

0

325

0

babel-preset-stage-0 패키지를 인스톨하여 presets에 stage-0 을 넣자 에러가 발생합니다.

0

312

1

rcc 스니펫 안되시는분들

0

270

0

webpack 5 대응

10

445

2

props의 정의에 대한 질문입니다.

0

377

1

section 4까지 수강 후 프로젝트 완성 후 오류 질문

0

374

1

react.min.js:13 Uncaught TypeError: e.render is not a function

0

346

0

화면에 나오는 코드로 하면 propTypes가 먹히지 않습니다.

0

424

2

메모앱 프로젝트 질문있습니다.

0

229

0

codepen.io 에 퀵에드가 없는데요ㅜㅜ

0

311

1

App.js에서 html 빨간줄

0

288

0

리뉴얼 강좌관련 질문드립니다.

0

261

0

App.js에서 오류가 나네요..

0

261

0

react app과의 port 혼용

1

277

0

Atom으로 예제를 따라하고 있는데 브라우저에 아무것도 나오질 않습니다.

0

344

2

여러개의 smart 컴포넌트를 만들어서 connect할 수 있는건가요?

0

255

0