[React] 스토어(store) 내장함수_디스패치(dispatch)/구독(subscribe)

겨레·2024년 12월 12일

[React] 리액트 스터디

목록 보기
89/95

📍 스토어(store)

프로젝트에 리덕스를 적용하기 위해 스토어(store)를 만들어야 한다.

✔ 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있고

스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있다.

✔ 그 외에도 몇 가지 중요한 내장 함수를 지닌다.


📍 디스패치(dispatch)

디스패치(dispatch)스토어의 내장 함수 중 하나로 ‘액션을 발생시키는 것’이라고 이해하면 될 듯!

✔ dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출함.

✔ 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어줌.


📍구독(subscribe)

구독(subscribe)스토어의 내장 함수 중 하나이다.

✔ subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면

✔ 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출된다.

  • 구독 예시
// listener 함수가 정의 => 상태가 업데이트될 때 호출됨
const listener = () => {
console.log('상태가 업데이트됨');  
}
// store.subscribe(listener) => 상태 변경을 감지하는 구독을 설정
// 이 메서드는 구독 해제 함수를 반환함
const unsubscribe = store.subscribe(listener);

// unsubscribe()를 호출하면 구독이 비활성화되고
// 더 이상 listener가 호출되지 않음.
unsubscribe();  
profile
호떡 신문지에서 개발자로 환생

0개의 댓글