[redux] redux 개념 알아보기

redux

• JavaScript 애플리케이션의 상태를 효율적으로 관리하기 위한 상태 관리 라이브러리
• 하나의 상태를 갖는다. => 어플리케이션의 복잡성을 낮춘다.

# store

- 정보(객체)가 저장되어 있는 곳
- 안에는 state가 있다. 직접 접근 불가능

 

# action

- 상태를 변경하는 작업을 나타내는 객체
- type 속성 일반적으로 가지고 있다.

 

# reducer

- state값을 가공해서 리턴해주면 state에 새로운 값이 된다.
- 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수

 

# state

- state는 객체이다.
- state를 다이렉트로 수정할 수 없다.

 

# dispatch

- reducer 호출 해서 state 값을 변경해준다.
- subscribe를 이용해서 render 함수를 호출해서 화면 갱신 된다.
 - reducer 호출 할때 현재의 state값과 action값을 전달한다.
- 액션을 전달하여 상태 변화를 일으키는 메서드

# subscribe

- 상태가 변경될 때 실행되는 코드
- 스테이트 값이 바뀔때 마다 render함수를 호출하고 싶을 때 사용한다.

 

# render

- UI를 만들어주는 내가 만든 코드
- getState를 통해서 state값을 가져와서 UI에 적용한다.
- state값이 바뀔 때마다 render함수를 호출하면 그때마다 UI가 바뀐다.

 

 

# 관계

 

• getState를 통해서 state값을 가져와서 화면에서 값을 사용한다.
• getState는 state에서 값을 가져오고 그 값을 render에게 준다.

 

 

• dispatch는 reducer 호출 해서 state 값을 변경해준다.
• reducer는 값을 가공해서 state에 새로운 값을 준다.

# 참조

https://www.inflearn.com/course/redux-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9

[지금 무료] 생활코딩 - Redux 강의 - 인프런

 

 

 

영상을 통해서 관계를 이해했다.
영상은 자바스크립트를 활용해서 작업을 했다.
나는 리액트에 직접 적용시키켰다.

 

2024.01.08 - [Study/자바스크립트] - [redux] 리액트에 redux 적용하기

[redux] 리액트에 redux 적용하기