1. 리덕스란?
2. 리덕스의 특징
3. 용어 정리
Redux
- 상태를 중앙에서 관리하는 상태관리 라이브러리
- 데이터가 예측하지 않은 데이터로 변형되지 않도록 관리해준다
Redux의 특징
1. 하나의 상태(state)를 갖는다
- 하나의 객체 안에 애플리케이션에서 필요한 데이터를 우겨넣는다 => 데이터를 하나의 객체로 중앙집중적으로 관리한다
- 복잡성을 한단계 낮춘다
2. state를 외부와 차단시켜 외부에서 데이터를 읽고 수정하는 것을 막는다
- dispatch를 사용해서 인가된 함수만 작업이 가능하도록 한다
- 데이터를 가져갈 때도 getState를 사용해서만 가져갈 수 있다 (데이터를 외부에서 직접적으로 관리할 수 없음)
- state 값이 바뀔 때마다 컴포넌트에게 데이터가 수정되었다고 알려준다
용어 정리
- store : 데이터 저장소
- state : store 안에 저장하는 데이터
- action으로만 데이터 변경 가능하다. (사용자 직접 변경 불가)
- action : state를 업데이트 할 때 발생하는 객체
- render : 우리가 작성하는 코드.
- 화면 UI를 구성
- reducer : state 값 가공자
- 리덕스에 저장된 데이터를 action을 참조해서 새로운 state값을 만들고 return
- dispatch()가 수정을 요청하면 reducer가 state 값을 변경
- getState : state 값을 직접 가져올 수 없기 때문에 getState()를 통해 가져온다
- dispatch : 상태를 업데이트하기 위해 사용하는 함수
- 발생시키고자 하는 action(객체)을 파라미터로 넘겨 action을 발생시키는 역할
- reducer를 호출해서 state의 값을 바꾸고, subscribe를 이용해서 render 함수를 호출 => 화면 UI 변경
- reducer를 호출할 때 dispatch는 현재 state값과 action 데이터 두개 값을 전달한다.
- reducer가 새로운 state값을 만들면 UI를 다시 만들기 위해 render가 다시 호출된다. (그 과정에서 dispatch가 subscribe를 통해 render를 호출)
- subcribe : 값이 변경됐을 때 구동될 함수들을 등록한다
'Fronted > React' 카테고리의 다른 글
[React] JSX 개념, 문법, 스타일링 요약 정리 (0) | 2024.03.27 |
---|---|
[Redux-Saga] 개념, 이펙트 요약 정리 (0) | 2024.03.25 |
[Redux] 2. 리덕스 적용 예제 (0) | 2024.03.21 |
[React] 개발 환경 세팅, 프로젝트 생성하기 (0) | 2024.03.21 |