리덕스란?
: 자바스크립트 애플리케이션을 위한 상태관리 라이브러리입니다.
=> state를 관리하는 것입니다.
state
부모 컴퍼런스에서 자식 컴퍼런스로 데이터를 보내는 것이 아닌 그 컴퍼런스 안에서 데이터를 전달할 때 state으로 보냅니다. => 검색 창에 글을 입력할 때 글이 변하는 것은 state으로 바꿉니다.
state이 변하면 re-render됩니다.
왜 리덕스를 사용할까?
1) props 없이 모든 component의 state를 직접 꺼낼 수 있다
=> 리액트는 props없이 state를 전달 받을 수 없지만, 리덕스는 가능하다.
리액트 예시
그렇다면 두 번째 컴포넌트에 props를 받지 않다면 어떻게 될까요?
두 번째에서 props의 값을 가져오지 않기때문에 세 번쨰에서는 값을 가져오지 못합니다.
그 이유는 props는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성때문입니다.
props(properties)
: 구성요소가 서로 통신하는 방법입니다.
상위 구성요소에서 아래쪽으로 흐릅니다
해당 값을 변경하려면 자식 관점 props 변경을 할 수 없고 부모 내부 상태 변경을 해야합니다.
만약에... 컴포넌트가 100개가 된다면 어떻게 될까요?
마지막 컴포넌트가 값을 필요로 한다면 100번을 props를 전달해서 받아야합니다.
=> 가독성이 떨어집니다.
그런 문제점을 회복하기 위해 리덕스를 사용하면 됩니다.
리덕스를 props를 사용하지 않고 component의 state 값을 꺼내서 사용할 수 있습니다. 그러다보니 필요한 곳에만 불러올 수 있기 때문에 가독성이 좋아지고 컴포넌트 재사용성이 좋다는 것을 알 수 있습니다.
2) state 관리가 용이하다.
React
"컴포넌트 기반 라이브러리"
=> 기능들을 컴포넌트에 저장합니다.
컴포넌트에 저장하게 된다면 코드가 복잡해지고 재사용성이 저하되기 때문에 리덕스를 사용하는 것이 좋습니다.
Redux
"상태관리 라이브러리"
=> 기능들을 store.js에 한 곳에 저장을 한 후 컴포넌트에 기능들을 불러옵니다. .
한 곳에서 기능을 관리하기 때문에 상태관리하는 것이 쉬워집니다.
Redux Data Flow
1) Action
call the reducer
2) Reducer
update store
3) Redux store
reduer new view
4) React componet
dispatch synchronous action
1) ... 반복
Action
: 간단한 자바스크립트 객체입니다.
우리가 수행하는 작업의 유형을 지정하는 type 속성이 있으면 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 payload 속성을 가질 수 있습니다.
Reducer
: 애플리케이션 상태의 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수입니다.
그들은 인수로 조치를 취하고 store 내부의 상태를 업데이트합니다.
Redux Store
: 하나로 모으는 객체 저장소는 애플리케이션의 전테 상태 트리를 보유합니다.
내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 action을 전달하는 것 입니다.
'CS지식' 카테고리의 다른 글
| CS 기초 지식 (0) | 2024.04.22 |
|---|---|
| [운영체제] 통신 프로토콜 (1) | 2023.09.12 |
| 동기와 비동기 (1) | 2023.07.11 |
| Restful API (0) | 2023.06.27 |