리액트 view → action → dispatch → store → view 흐름 (업데이트 ing)

먼저 이 개념들을 알자. 

18. x는 3을 담은 '그릇'

19. y는 x의 또 다른 이름, 별칭인 것

 

21. x는 참조변수/이름

22. y는 x의 또 다른 이름, 별칭인 것

 

13. 20이 나옴

15.

- f1은 exam.print의 또 다른 이름

- console.log(f1)을 하면 

  ƒ print(){
        console.log(this.kor)
    }이 나옴

16. 에러가 남 

- 생각으로는 f1() 은 exam.print()랑 같은거니까 20이 나와야 할 것 같은데, undefined 에러가 나옴

출처 : 나의 그림(?) ㅎㅎㅎ

객체를 통해서 부르는건 Exam을 다 가지고 있어서 this.kor 도 당연히 부를 수 있는건데, 

f1()으로만 하게 되면 this.kor를 '잃어버려서' 바인딩이 필요함. 

 

다른 말로 풀이 (선생님 언어) 

- "exam.print()처럼 앞에 객체가 있어야(!) this를 넘겨줄 수 있는건데, f1() 이렇게만 넘겨주면 this를 전달해줄 수가 없다."  

---

* 큰 흐름 * 

 

constuctor에 bind해주는 방법 

1) 30. value={this.state.x}로 현재 4번째줄의 기본값 0이 담겨져있음

2) 30. 우리는 client가 화면에 입력하는 값으로 1)의 0을 바꾸고 싶은거지. 그래서 onChange={this.xInputChange} 함수를 부르게 했어. 

3) 11. this.setState 라고 해서 store에 값을 뒤에 계속 쌓는 함수를 넣어줌. (지금은 하드 코딩으로 우선 30을 주었지.) 

-> 근데 여기까지만 하면 에러메시지가 남. 

    13번째줄에서 this.setState에서 this가 undefined임. 

-> 8번째줄처럼 'binding' 과정을 해줘야 한다. 

4) 30. 그럼 아까 value={this.state.x}를 통해서 이제 store에 '쌓인' 30을 가지고 올 수 있게 된다. 

 

or 

 

화살표로 해주는 방법

1) 위와 과정 동일

2) 위와 과정 동일

3) 17. e (이벤트 객체)를 쓴 다음에 

    18. setState로 값을 넣어줄건데, e.target.value를 넣어줄거야. 

4) 위와 과정 동일 (대신 여기서는 이제 clinet가 화면에 입력한 값을 가지고 오게 되겠지) 

 

 

 

 

 

 

위에가 MVC

- two way로 값이 바뀌면 저절로 바뀜 

 

아래가 Flux

- one way로 onChange 같은거로 내가 값 바뀌는걸 직접 고쳐줘야 한다는 것

- store는 model를 계속 쌓는 형태로 보면 됨

  1) state를 담는 store 가 존재