티스토리 뷰

프론트엔드/React

Redux

celine_e 2023. 2. 3. 16:11

✨what is Redux ?

- A Predictable State Container

- redux 란 예측 가능한 상태 관리 상태 관리 라이브러리 입니다.
- 그렇다면 state는 무엇일까요?

✨what is State ?

- state와 props를 같이 알아봅시다.


🔑 props ?

- 리액트에서는 부모 컴포넌트와 자식 컴포넌트 사이에서 값을 주고 받을 때에 props를 이용합니다. 값을 주고 받을 때에는 부모 컴포넌트에서 자식 컴포넌트로 이동이 가능합니다. 부모 컴포넌트에서 값을 전달을 했다면, 자식 컴포넌트에서전달 받은 값은 변할 수 없습니다. 만약 변경을 하고 싶다면 부모 컴포넌트에서 값을 다시 전달을 받아야 합니다.

🔑 state ?

- 부모 컴포넌트에서 자식 컴포넌트로 값을 전달을 하는 방식이 아닌 컴포넌트 안에서 데이터를 전달을 하려면 state를 이용해야합니다.
state가 변경이 된다면 Rerendering이 됩니다.


그래서 Redux는 state를 관리 하는 것 입니다.

상위 컴포넌트에서 정보를 다 보관하는 것이 아니라
Redux Store 에서 정보를 저장을 한다면 상위 컴포넌트 이동이 없기 때문에 상태 관리가 쉬워집니다.

Redux Data Flow 는 한 방향으로 흐릅니다.

각각의 역할을 알아봅시다.


🔑 Action ?

Action은 무엇이 일어났는지 설명하는 객체입니다,

🔑 Reducer ?

Action을 함으로 인해서 원래의 state가 변경이 되었다 라는 것을 설명하는 것이 Reducer 입니다.

🔑 Store ?

전체적인 application의 state를 감싸주는 역할을 합니다. store안에는 method들이 있는데 그것을 이용하여 관리를 해줄 수 있습니다.


https://www.freecodecamp.org/news/what-is-redux-store-actions-reducers-explained/

What is Redux? Store, Actions, and Reducers Explained for Beginners

Redux is a predictable state container for JavaScript apps. So what does that really mean? If we dig deeper into this statement, we see that Redux is a state management library that you can use with any JS library or framework like React, Angular, or Vue.

www.freecodecamp.org

'프론트엔드 > React' 카테고리의 다른 글

[React] Hooks  (0) 2023.05.22
[react-router-dom] useParams  (0) 2023.02.17
React Router Dom  (0) 2023.02.02
React Folder Structure  (0) 2023.02.02
npm, npx  (0) 2023.01.18
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2026/04   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
글 보관함