react-redux란?

react의 상태 관리 라이브러리이며 useState hook의 종속성 탈피를 위해 사용한다.

state 종속성 탈피

useState를 사용 할 경우 컴포넌트 내부에 state를 만들고, 상태 변경 함수로 state를 바꾼다.
state는 컴포넌트에 종속되어 다른 컴포넌트에서 사용하려면 props를 이용하여 전달해야 한다.

redux는 컴포넌트에 종속되지 않으며, 컴포넌트 바깥에서 상태 관리가 가능하다.

만약 규모가 큰 프로젝트를 진행해야 할 때, 컴포넌트가 매우 많을 것이며 중첩된 컴포넌트도 많을 것이다.

여기서 생기는 문제점은 state가 자식의 자식의 자식...에서 사용한다면 props을 내리고 또 내리고... 매우 귀찮고 불편한 과정이다.

이러한 문제점을 해결하기 위한 방법이 바로 redux 라이브러리를 사용하는 것이다.

요약

redux 라이브러리를 사용하면 state를 redux store에 보관하여 모든 컴포넌트가 state를 꺼내 쓸 수 있기 때문에 간편하게 state 공유가 가능하다.**

사용하는 방법

1. 설치

• redux toolkit 라이브러리는 redux의 개선버전이다
• react, react-dom의 버전이 18.1.x 이상이면 사용 가능하다

npm install @reduxjs/toolkit react-redux

2. 세팅

• 먼저 store.js 파일을 만든 후, 아래 코드를 작성함

import { configureStore } from '@reduxjs/toolkit';

export default configureStore({
    reducer: {
  
    }
})

configureStore는 state를 보관하는 파일과 같다.

• index.js 파일에 App 컴포넌트를 <provider store={store}> 태그로 감싸준다.
  => App과 자식 컴포넌트 모두가 store.js의 state를 쓸 수 있게 된다

3. 보관하기

• createSlice() 를 이용하여 인자로
  {name:"state 이름", initalstate : "state 값"} 을 작성해주면 state 하나가 생성된다.

  그 다음으로 configStore() 안에 아래와 같이 state를 등록하면 된다.

import { configureStore, createSlice } from '@reduxjs/toolkit'; 
// createSlice도 import 해줘야함!

let user =  createSlice({
    name: "user",
    initialState:"kimcoding"
})

export default configureStore({
    reducer: {
        user: user.reducer, 
    }
})

• { user(작명) : (createslice()로 만든 state이름).reducer } 형식으로 쓰면 된다

4. 가져다 쓰기

• 컴포넌트 내에서 useSelector( (state) => return state) 을 사용하면 state에 store에 있던 모든 state가 할당된다.

ex) 아래 코드와 같이 state를 보관했다면

let user =  createSlice({
    name: "user",
    initialState:"kimcoding"
})

let stock = createSlice({
  name: "stock",
  initialState: [10,11,12]
});

결과 아래 코드와 같이 모든 state가 가져와진다.

state = { user: "kimcoding", stock:[10,11,12] }

++ 저장해 둔 state에서 가져오고 싶은 것만 가져올 때

만약 위의 state 보관함에서 user의 값만 가져오고 싶다면?

useSelector( (state) => return state.user)

// state = kimcoding

---

결론

간단한거나 컴포넌트가 많이 없는 앱을 만들 때에는 state & props를 사용하겠지만, 규모가 조금이라도 커진다면 redux를 사용할 것 같다!