React SNS 3-1. redux 주요 개념 소개

흩어져 있는 state 들을 하나로 모아서 컴포넌트 마다 필요한 state를 던저 주면 프로그램 개발과 관리에 효율이 좋습니다. state 들을 중앙에서 관리해주는 리덕스 라이브러리를 간단하게 소개 합니다..

 

{
	isLoggedIn : false, // 로그인 여부 -> A,C
    user : {}, // 로그인한 사용자 -> b,c
    mainPosts: [], //메인 게시글들 -> c
    ...
} -> store

하나의 state 를 A에 보낼수도 있고 C 에도 보낼수 있습니다.

 

Redux 는 state 의 역할을 합니다. 그래서 Redux를 쓰면 React의 state를 쓰지 않아도 됩니다. 하지만 대부분 두가지를 같이 씁니다. 

Redux의 state는 복잡할때 사용을 하고 React의 state는 간단할때 사용을합니다.

그럼에도 Redux를 사용하는 이유는 크게 안정성,state 통제 용이하기 때문에 사용합니다.

 

Redux에는 Action 이라는 기능이 있습니다.

Action 은 state를 바꾸는 행동 입니다. isLoggedIn : true 로 바꿔주는 액션을 미리 생성해 놓은후 Dispatch 를 하게 되면 Action 이 실행됩니다. 그러면 Redux가 isLoggedIn을 true로 바꿔줍니다. state 들은 Action을 통해서만 수정이 가능합니다. React의 setState와 같습니다. 

 

그리고 store는 state와 action, reducer 가 다 합쳐진 개념 입니다.

Action -> state를 바꾸는 행동 ex) 로그인 액션

Dispatch -> Action을 실행 ex) 로그인 액션 dispatch

Reducer -> Action의 결과로 state를 어떻게 바꿀지 정의

ex) 로그인액션 dispatch 시 -> isLoggedIn state를 true로 

 

출처 : https://www.youtube.com/channel/UCp-vBtwvBmDiGqjvLjChaJw

ZeroCho TV