react 에서 redux 사용해보기! (1)

이번 팀 프로젝트에서 redux을 사용할 일이 있어 공부도 할 겸 정리해봅니다!

우선 redux를 사용하기 위해 알아야 할 4가지 개념을 간단하게 정리해보면

 

1. redux 

복잡한 상태를 관리하는데 도움이 되는 상태 관리 도구이며 예측이 가능하다.

중앙 데이터 저장소 (CDN)를 통해 전체 데이터 저장소를 한 곳에서 관리할 수 있다.

 

2. reducers 

상태를 관리하고 새롭게 업데이트된 상태를 반환해준다.

 

3. actions

actions는 type, payload 두 가지 속성을 가지며

type는  고유 식별자

payload는  디스패치에 대한 데이터가 포함되어 있다.

 

4. dispatch

데이터 업데이트 actions를 보내는 데 사용된다.

 

Redux 사용

1. react에서 redux를 사용하기 위해 먼저 필요한 라이브러리를 설치해주어야 한다.

npm install redux react-redux

 

2. store , reducers 생성

reducers에서 state를 리턴해줘야 한다.

 

3. store에 접근할 수 있게 index 파일에서 Provider로 감싸준다.

 

4. useSelector를 사용하여 store에서 특정 state를 가져온다.

 

 

store 상태 업데이트

dispatch를 통해 actions를 전달해주면 

reducer에서 action type에 따라 상태를 업데이트해줄 수 있다. 

 

1. useDispatch 사용

아래 사진과 같이 useDispatch를 통해 dispatch를 선언한 뒤

원하는 이벤트에 dispatch를 통해 type, payload (업데이트할 데이터)를 전달해준다.

 

2. reducer에서 현재 전달받은 action을 처리할 수 있는지 판단한 뒤 처리한다.

처리할 수 없다면 기존 state를 리턴해준다.

주의 사항으로 reducer에서는 동기 함수만 사용해줘야 하며,

어떤 사이드 이펙트도 수행되면 안 된다.

원래 상태를 변경하면 안 된다.

redux에 대한 완전 기초만 정리해봤는데... 재밌었습니다.!

이제 toolkit!! 많이 들어본 친구인데 바로 공부해봐야겠습니다..!!

 

참조 자료

https://www.youtube.com/watch?v=zrs7u6bdbUw