24년 01월 11일 심화과정#5 Redux

 

전역 상태 관리 Global State Package에 대해 배웠다.

 

전역 상태 관리의 종류에는 Redux, Recoil, Justand, jotai 등 여러가지가 있다.

하나하나에 대해 알기 이전에 전역 상태 관리가 무엇인지, 그 필요성이 대두된 배경이 무엇인지 알아보자. 

 

---

전역 상태 관리 Global State Package는 State를 전역변수로 관리하는 패키지

 

그렇다면 기존 useState의 특징에 대해 알아보자. 

 

[ useState의 특징 ]

1. 해당 State를 필요로 하는 부모 컴포넌트에 State를 선언해줘야 한다

    - 이벤트의 시작지점과 도착지점이 되는 컴포넌트 두 개를 하나의 부모 컴포넌트로 묶어서 그 부모 컴포넌트에 state를 선언해준다

    - 그렇게 부모 컴포넌트에 선언한 state를 props로 내려주는 형태

    → 쓸 데 없는 부모 컴포넌트가 생기게 됨

    → props 지옥이 발생하게 됨

    → 선언 위치와 도착 위치가 일관되게 발생하지 않아 데이터의 흐름이 복잡해지고 state가 선언된 위치를 찾기 어려워짐 

 

2. 새로고침하면 초기화 된다

    - 리랜더링을 제외한 컴포넌트 랜더링 시 state가 초기화 된다

    → 장점: 회원가입의 input일 때 등의 상황에서는 오히려 초기화되는 게 좋음

    → 단점: 게시판의 페이지네이션이 불가하다

 

 

그러한 이유로 전역 상태 관리의 필요성이 대두되었다

 

    - 말그대로, state를 전역변수로 관리하는 것

    - 모든 components에서 접근할 수 있으며, 프로젝트를 끄기 전까지 값이 날아가지도 않는다

    - 전역변수를 쓸 때와 동일한 장단점을 가진다

    - but, 많이 쓰면 안 됨. 메모리를 사용하는 것이기 때문. 꼭 필요한 경우에만 사용한다

 

 

[ Global State Package의 종류 ]

1. Redux

    - 현재 시장에서 많이 사용하고 유명

    - but, 매년 조사에서 가장 빠르게 없어질 패키지 1위로 꼽히고 있음

2. Recoil, Justand, jotai 등

    - 그러나 당연히 이러한 패키지들 또한 리덕스에서 시작됐고, 리덕스의 단점을 보완하는 형태로 발전되었음

    → 그래서 리덕스를 먼저 공부하기로 하자.

 

---

Redux

[ Redux의 특징 ]

• Flux 구조 ( Store라는 가상의 공간을 만들어서, 그 스토어가 모든 것을 담당하게 하는 방식)
• React랑만 사용하는 것이 아님 (앵귤러, 뷰 등..)
• ⇒ so 추가적으로 리액트와 리덕스를 연결하는 패키지를 설치해줘야 한다.
• ⇒  npm install react-redux 

[ Redux의 동작구조: Flux 구조 ]

1. Store.js

    - State(현재상태)를 종합적으로 저장하는 공간

    - 실질적으로 State를 관리하는 공간

 

2. Reducer.js

    - component와 Store를 연결해주는 역할

    - component는 무조건 Reducer를 통해서만 Store에 접근할 것. (직접접근 불가능)

 

3. Action.js

    - component에서 Reducer에 부탁할 수 있는 명령어 목록을 적어놓은 데이터 덩어리

    - 문법 형태 아니고, 그냥 정해놓은 규칙(개념)과 같음

  

 

이로써, component는 state에 직접 접근할 수 없게 되었고,

state를 조작하는 건 이제 Reducer로 완전히 옮겨갔다!!!!!

component는 Reducer를 통해 Store 안에 저장된 state를 사용할 수 있게 되었다. 

 

[ Redux 사용으로 인한 효과 ]

⇒ 더이상 의미 없는 부모 컴포넌트를 만들 일 없음!

⇒ props 지옥이 사라짐!

⇒ 그리고 덕분에 리랜더링 최적화가 더 잘 되게 되었음!

 

---

리액트에서 Redux를 사용하는 방법에 대해 알아보자.

 

Redux는 리액트에서만 사용 가능한 패키지가 아니다. 뷰..등 많은 곳에서 사용 가능하다.

그래서 설치할 때 다음의 두 명령어를 사용한다. 

 

npm install redux

npm install react-redux

 

 

index.js >>

import { Provider } from "react-redux"

ReactDOM.createRoot(document.getElementById("root")).render(

    <Provider store={store}>

        <App />

    </Provider>

)

 

기존 <App /> 컴포넌트를 <Provider></Provider> 컴포넌트로 감싸준다.

 

src 폴더 > redux 폴더 생성 

> action.js 파일 생성

 

(reducer에 전달하고자 하는 object를 선언하고 return 해준다)

 

 

> reducer.js 파일 생성

import { createStore } from "redux"

 

1. 초기 State를 선언해준다

const initState = { 

}

 

2. Reducer를 선언해준다

const reducer = (state = initState, action) => {

}

 

3. store를 선언해준다

const store = createStore(reducer)

export default store

 

 

 

---

 

즌쯔 이해하는 데 넘 어려웠다......

그림 그리고 몇 번이고 듣고, 읽고, 말해보니 이제야 약간 윤곽이 잡히는 듯하다.

직접 만들어보며 더 익혀보는 수밖에...........유유.. 화이띵@