[리액트 다루는 기술] 리덕스 작동원리 && 기초

리덕스란?? 

상태관리 라이브러리의 일종으로 상태업데이트 관련 로직을 다른 파일로 분리시켜서 효율적인 관리가 가능하며 contextAPI와 비슷하게 사용 될 수 있으나 실상 다른 여러기능도 많고 미들웨어 등등 보다 체계적인 관리가 가능해서 contextAPI보다 널리 쓰이고 있다.

허나 16v에서 contextAPI의 기능이 좋아지고 나서는 잘 모르겠음

바닐라 자바스크립트가 많이 쓰이는 이유가 이녀석떄문인것 같다.

불변성을 항상 유지해야한다.

 

---

용어정리

 

액션

상태에 변화가 필요하면 발생한다.

하나의 객체로 표현되며 type필드를 반드시 가지고 있어야하고(이게 이름임) 추가적인 업데이트 때 참고 할 사항을 넣을 수 있다. 그러니 이렇게 만들려면 함수가 있어야 하는데 이게 액션 생성함수이다

{type : "TOGGLE_VALUE"}  //액션 형태(기본)

function addTodo(data) {  //액션 생성함수
	return {
    type:"ADD_TODO",
    data
    }
}

 

 

리듀서

변화를 일으키는 함수(reducer method랑 비슷한 느낌)

두개의 인자를 받는 함수이고 예제의 내용은 switch문으로 되어있는데 이게 이해하기가 쉽다. 인자로써는 초깃값을 첫번째 인자로 받고, 액션을 두번째 인자로 받는다. (모르겠으면 예제 보자)

spread 연산자를 통해서 얕은 복사를 많이 하는데 리덕스에서는 immer도 쓸 수는 있다.

리듀서 안에서는 비동기작업이나 Date와 fetch작업같은 파라미터는 같지만 return 값이달라지는 작업을 하지마라 === 리듀서의 순수함을 지켜라

 

스토어

리덕스를 적용하기 위해서 만든 것(저장고 같은 느낌도 듦 내장함수 개많음)

한개의 프로젝트(애플리케이션)에는 한개의 스토어만 가지는 것이 가장 좋다(여러개 있으면 머리 복잡해짐) 상태와 리듀서가 들어가 있다.따로 스토어를 만드는 함수가 있는데 기억하자 creatStore() 파라미터로 리듀스가 들어간다(임포트해서 쓰는거임 걍 쓰는거 아님)

 

디스패치

스토어의 내장함수, 액션을 발생시키는 것이라고 생각하자 액션객체가 파라미터로 들어간다

dispatch(action) 과 같은 형태로 액션 객체를 파라미터로 호출한다.이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜 새로운 상태를 만들어준다.(이게 호출되야 수정함)

 

구독

스토어의 내장함수, subscribe 안에 listener함수를 파라미터로 넣어서 호출하면 액션이 디스패치되어 상태가 업데이트 될 때마다 이 리스너 함수가 호출된다.(잘 모르겠음) 

 

---

Parcel

웹 애플리케이션 프로젝트를 구성할 수 있게 해주는 녀석(내장 아님)

설치하고 세팅작업 마친다음에 리덕스 모듈도 설치를 하면 준비가 끝난다.(상세 세팅은 책을 보자)

 

---

이해 못한 내용

미들웨어의 기능은 효율적인 비동기작업이란다.

랜더함수가 나오는 부분

구독에 관한 부분

 

 

 

 

한줄정리

순서 : 액션함수의 생성과 액션타입 생성 >>> 초기값 생성 >>> 리듀서 작성 >>> 스토어 만들기

react-redux라이브러리를 사용해서 구독개념을 대체할 수 있고 상태 업데이트 될 때마다 컴포넌트 리렌더링 해보자.

 

[ERROR] 처음에 package.json을 만들고 init을 했더니 에러가 났었다 해결은 json파일 삭제하고 했다.