React(12) state 전달하려면 상속을 많이 받아야 할 때 : Redux

목차

Redux 사용하기

• 세팅방법
• 보관하고 사용하기

---

• 리액트를 사용하다보면, 자연스레 컴포넌트들이 엄청나게 많아지고, 컴포넌트안의 컴포넌트안의 컴포넌트 . . . 등 엄청나게 많은 부모 자식관계를 형성하게 된다.
• 그럴때마다, props.props.props.props.name 이라고 state를 할 수는 없는 노릇이므로, Redux라는 편한 라이브러리 사용하는 법을 알아보자.

맨위의 App에서 grand,grand child까지 state를 전송한다면...? 생각만 해도 끔찍

• Redux는 redux store.js라는 하나의 js파일에다가, 모든 state들을 보관해 놓을 수 있다. (html의 localStorage처럼)
• 하지만 모든 state들을 저장 해놓을 필요는 없고, 모든 컴포넌트에서 자주 사용하는 state만 저장해놓으면 된다.
  ( 예) 다이어트앱을 만든다고 가정했을 때, 몸무게 state)
  
• Redux세팅을 해보자.

 

---

Redux 사용하기

Redux 세팅방법

• 여느 때와 같이, npm에서 설치를 하기 전에, 체크를 해보아야할 것이 있는데,
  package.json이라는 홈페이지 구동에 필요한 모든 라이브러리 버전을 모아놓은 파일을 열어서,
  react 과 react-dom 버전이, 18.1 버전 이상이어야지만 설치가 가능하다.
  
  -> 18.1 미만일 경우, ""안의 버전을 "^18.1.0"으로 고친후, 파일저장하고, npm install 진행 하면 된다.

1. 터미널에, npm install @reduxjs/toolkit react-redux 를 입력한다.
2. 설치가 되었다면, src 폴더안에, store.js 라고 파일을 생성한다.
3. store.js안에, 밑의 코드를 복붙한다.
   

   import { configureStore } from '@reduxjs/toolkit'
   
   
   
   export default configureStore({
   	reducer: {
       
       }
      })

   
   
4. index.js 파일에 가서, <BrowserRouter> 및 여러 태그들을 최상단으로 감싸는 코드로, <Provider sotre={{store}>를 작성한다
   물론 위 의 코드를 타이핑 하기 위하여, 두 줄의 코드를 import해놓아야 한다.
   Provider를 사용하겠다는 코드와, store.js에 import 된 state들을 사용하겠다는 코드이다.

이렇게 한다면, Router들과 App.js는 store에 있는 state들을 갖다 쓸 수 있게 된다.

 

---

 

Redux - store에 state 보관하고 사용하기

• Redux store에 state 보관하기
  
  1. store.js파일에, createSlice()라는 함수를 쓰면은 보관할 수 있다.
  2. 사용하기 위하여, createSlice를 redux에서 import를 해온다.
  3. 문법은, createSlice({ name : "state이름", initialState : "값" }) 이 되겠다.
  4. 하지만 이를 사용하기 위해서는, state이름을,
     export default configuresStore({ reducer : { 변수 : 등록할 state이름.reducer }}) 에 이렇게 등록을 해놓아야한다.
     (보통 변수와 등록할 state는 동일한 이름으로 설정한다.)
     등록을 하기 위하여, ③에서 다뤘던 createSlice를 변수에 할당해놓는다.
     ㅇㅇ
• Redux store에 있는 state 사용하기
  1. Redux store에 보관해 놨던 state를 사용하고 싶은 위치에,
     let 변수명 = useSelector( (파라미터명) => { return 파라미터명 } )
     로 선언을 해놓으면, Redux store에 있는 모든 state가 가져와지게 된다.
     (특정 state만 가져오고 싶다면, return 파라미터명.항목명 으로 부분만 가져올 수 있다.)
  2. 선언해 놓은 변수로 데이터 바인딩을 하여 사용하면 된다.
     ㅇㅇㅇ

---

Redux - store에 state 변경하는법

 

 

 

 

---

 

참고 출처 : https://aaamy91.tistory.com/37

[React-Redux] 리덕스 개념 정리