코쿼 강의 3 - contextAPI

• 리액트 기본 원리 : state가 바뀌면 render를 한다. 그래서 직접적인 DOM 조작은 안하는 것이 좋음. (state가 꼬임 - uni-direction) 근데 꼭 해야된다면 useRef…

• MVC
  이벤트 -> 상태변경 -> 화면의 변화
  Controller = 입력장치 (마우스,, 등) / 진입점!!
  모델과 뷰 관계를 느슨하게.

  const tm = new TodoModel("http:///");
  const view = new View(tm);
  
  class View {
    constructor(todoModel) {
      this.todoMoel = todoModel;
    }
  
    reRender(newData) {
      // Dom 변화를 준다.
    }
  
    action() {
      // 무언가 하고 나서..
      this.todoModel.subscribe(this.reRender);
    }
  }
  

^{생각: 지식이 실습의 수준보다 넘 높다,,}

• 리액트가 리랜더링 되는 이유: 상태를 구독하고 있는 것 !!

• npm run build

• 관심있는 애가 바뀌면 소비하는 애가 다 바뀜… !!

• state 짜는 방법:

  1. useState로 먼저 짬
  2. 다른데다가 공유해야돼 -> props
  3. 근데 전혀 이상한데다 공유해야돼. -> 상태를 위로 올려서 prop으로 전달
  4. 아님 바로 던져주기 -> context API(필요할 때만)

^{생각: 내일 회사가면 구조부터 짜고 문서 정리해야겠따}

상태가 바뀌면 렌더링이 다시 된다!! 만 기억하면 된다–!

^{생각: 내일은 코드 안짜고 설계만 할거야…}

• useReducer 사실 useState로 구현할 수 있다.
  • 관심사를 분리 / 모델 분리 (모델 테스트 가능, 모델 재사용)
  • 컴포넌트가 뷰만 사용. 뷰에서는 행위만 표현 (순수해짐 -> 재사용 가능)
  • dispatch 메소드는 어떠한 행위를 자기 객체에 담아서 날라줌
  • dispatch{type, payload} : payload는 데이터
  • useReducer의 장점 : dispatch로 함수 전달 가능!!
• 기존상태변경 === mutable / 새로운 객체/배열 생성 === immutable (기존은 보존.. )
• shallow equality checking === immutable === 껍데기만 비교 (두 객체가 들어왔네. 메모리 주소가 다르네? 렌더 다시행~)

• deep equality checking === mutable === 속까지 까서 비교

• history API (브라우저 api임! js api 아님!) / pushState .. / react Router가 공식적으로 history에 의존!

^{생각: context 여러개면 어디에 놓는 게 좋지? 다 루트? or 사용하는 컴포넌트들 중 가장 상위?}

^{생각: 내 블로그에 search 기능 있으면 좋겠다,,}