책 한권으로 시작하는 react (14)

ppby·2020년 7월 17일
0

ppby.TIL

목록 보기
14/26
post-thumbnail

상태 관리 redux 라이브러리에 대한 내용입니다.

리덕스 라이브러리 이해하기

  • 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다.
  • 전역 상태를 관리할 때 굉장히 효과적
    (단순한 전역 상태 관리라면 Context API 로 충분)
    -> 리덕스는 체계적으로 상태를 관리할 떄 유용 (프로젝트 규모가 큰 경우)
  • 미들웨어 기능 제공하여 비동기 작업을 훨씬 효육적으로 관리할 수 있게 해줌

액션

  • 상태 변화가 필요하면 액션 발생 (하나의 객체로 표현)
  • type 필드는 반드시 가지고 있어야 함 (이름은 고유해야 한다.)

액션 생성 함수

  • 액션 객체를 만들어 주는 함수
  • 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 함
    - 매번 액션 객체를 작성하기 번거로움 -> ❗️함수로 만들어서 관리한다.

리듀서

  • 프로젝트에 리덕스를 적용하기 위해 만듬
  • 액션을 만들어서 발생 시키면 리듀서가 현재 상태와 전달 받은 액션 객체를 파라미터로 받아 옴
    -> 두 값을 참고하여 새로운 상태를 만들어서 반환

스토어

  • 프로젝트에 리덕스를 적용하기 위해 만듬
  • 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있음
  • 현재 애플리케이션의 상태와 리듀서가 들어 있다.

디스패치

  • 스토어의 내장 함수 중 하나
  • 액션을 발생 시키는 것 으로 이해 -> dispatch(action)
  • 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 줌

구독

  • 스토어 내장함수 중 하나
  • subscribe() 안에 리스터 함수를 파라미터로 넣어서 호출해 주면,
    이 리스터 함수가 액션이 디스패치 되어 상태가 업데이트될 때마다 호출

Parcel로 프로젝트 생성 (vanilla JS)

  • 빠르게 웹 애플리케이션 프로젝트 구성
	$ yarn globar add parcel-bundler
  • 서버 실행 $ parcel index.html , 수정 후 파일을 저장할 때마다 새로고침된다.

리덕스의 세 가지 규칙

단일 스토어

읽기 전용 상태

리듀서는 순수한 함수

profile
(ง •̀_•́)ง 

0개의 댓글