[React] 리덕스란 무엇인가, 리액트의 작동 순서

하은 ·2022년 2월 15일
0
post-thumbnail

리덕스란

리덕스란 상태를 관리해주는 JS 라이브러리입니다.
리액트하고 사용할땐 react-redux를 깔아서 함께 쓴다.

상태관리가 왜 필요할까요?
리액트의 경우 컴포넌트에서 원래는 useState 등을 사용했는데, 각 컴포넌트가 아니라 앱 전체에서 상태를 관리해야하는 경우가 많습니다.

그럴 때 앱 전역에서 사용되는 상태를 관리하는게 리덕스입니다!

// 만약 todolist를 만드는데 투두와 완료, 삭제리스트를 이렇게 관리하면 한 js에서 관리할 게 너무나 많음
const state = {
      todolist:[],
      donelist:[]
}

그럴 때 리덕스를 사용하면 상태를 앱 최상위에서 관리하기 때문에 그 하위 컴포넌트 어디서든 상태값을 가져와 사용할 수 있습니다.

리덕스의 작동 순서

리덕스는 사용자 Action이 발생했을때, Store로 가기까지 무조건 한 방향으로 움직입니다.

1. Dispatch 함수를 실행하면
2. Action이 발생한다.
3. 이를 리듀서(reducer)가 전달하면
4. 최종적으로 상태(state)를 바꾼다.

Action: 무조건 타입을 전달한다.

{
type:'some text'
}

Reducer: param으로 상태와 액션을 받고 상태를 변화시킨다.

function reducer(state, action) {
	return changeState;
}

Store: 앱 전체에서 사용되는 상태 저장소

Distatch: 액션을 발생시키는 함수

e.g. dispatch(action)

자세한 사용법은 차차 업로드하겠습니다!

참고: Fastcampus '한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online' 강의

profile
Human slash developer who's striving to be the BEST version of herself

0개의 댓글