3. Redux 따라하기

Redux

• 상태 컨테이너

• 상태 관리를 컴포넌트 바깥에서 해서 prop driling을 막을 수 있음

1. 리덕스 스토에에 상태 데이터들이 담겨있음

2. 컴포넌트는 스토어를 구독함. 이 때 특정함수를 스토어에 전달하고 나중에 스토어 상태값에 변동이 생기면 전달받았던 함수를 호출해줌 subscribe(listener)

3. 컴포넌트에서 상태를 변경하고 싶을 때 dispatch 함수를 통해서 액션(어떤일을 할지 나타내는 객체)을 스토어에 던져줌

4. 스토어의 리듀서가 상태를 변경시킴

5. 상태변화가 생기면 구독중이던 컴포넌트들에 listen 함수 호출하여 상태가 변경되었으니 리렌더링 하라고 알림

Reflect

• 프록시 생성을 단순화하는 내장 객체

• 내장 메서드를 호출하는 방식의 일관된 방법으로 기존 메서드를 사용할 수 있음

• Reflect.get은 객체 프로퍼티를 읽음

• Reflect.set은 객체 프로퍼티에 값을 쓰고 성공 시 true, 실패 시 false를 반환

Proxy

• 특정 객체를 감싸 프로퍼티 읽기 및 쓰기와 같은 객체에 가해지는 작업을 중간에 가로채는 객체로 사용

let proxy = new Proxy(target, handler);

• target : 감싸게 될 객체로, 함수를 포함한 모든 객체가 가능

• handler : 동작을 가로체는 메서드 trap이 담긴 객체로, 이곳에서 proxy의 동작을 처리

• Proxy는 일반객체와 다른 특수객체(exotic object)로, 자체적으로 가지는 프로퍼티가 없음

• 자바스크립트에 객체에 어떤 작업을 수행하면 자바스크립트 명세서에 정의된 내부 메서드가 관여하게 됨

• 프록시의 트랩은 내부 메서드의 호출을 가로챌 수 있음