[React] 8일차 일기

후우 드디어 위기가 왔다. 뭔가 되게 복잡해지면서 머리에 안들어오고 응용도 안되기 시작했다. 싹 갈아엎고 처음부터 복습이 필요한 시기가 슬 온거같다. 일단 오늘은 Redux에 대해 공부했음

 

1. Redux를 사용하면 컴포넌트들을 props없이 state 공유할 수 있기 때문에 사용함. 근데 요즘 Redux Toolkit을 쓰는 것을 권장하기 때문에 엄밀히 말하면 Redux Toolkit을 공부했음

 

2. Redux 설치하는 방법

: 터미널에 install @reduxjs/toolkit react-redux

 

3. Redux 세팅하기

  1) store.js 파일 생성하기

  2) 생성한 파일에 아래 코드 붙여넣기

import { configureStore } from '@reduxjs/toolkit'

 

export default configureStore({

    reducer: { }

})

  3) index.js가서 provider import하고 store도 import한 다음 <Provider store={store}>로 <BrouserRouter> 감싸기

 

4. Redux store에 state 보관하는 법

  - let 변수 = createSlice({name : 'state이름', initialState: '값'}) / createSlice는 useState()역할, state하나를 slice라고 부름

  - createSlice안에 name과 initialState 작성 후 export되는 부분의 reducer 안에 '작명 : 변수.reducer' 등록해야 사용 가능

 

5. Redux store의 state 꺼내는 법

  - state가 필요한 곳에 let 변수 = useSelector((state) => {return state}), 여기에 모든 state가 담겨있음.

  - useSelector의 return 부분에 return 안쓰고 state.slice의name 을 쓰면 그 slice의 자료만 나옴

* 공유가 필요없는 state는 Redux store 안에 안 넣는게 좋음

 

6. Redux의 state 변경하는 법

  1) state 수정해주는 함수 만들기

    - 원할 때 그 함수를 실행해달라고 store.js에 요청

    - state 수정 함수 만드는 법 : createSlice 안에 reducers:{ 작명(state) { return '새로운 state' }}, state 파라미터는 기존 state를 뜻함

  2) 만든 함수 export 하기

    - export let { 작명한 state 수정 함수 (여러개 작성 가능) } = createSlice변수.actions

    - 변수 밖에 변수명.actions라고 작성하면 state 변경 함수들이 object자료로 남음

  3) 만든 함수 import 하기

  4) state 변경 함수가 필요한 곳에 가서 let dispatch = useDispatch() 작성. store.js로 요청을 보내주는 함수임.

  5) 필요한 부분에 가서 dispatch(state변경 함수명) 이렇게 작성해야함

 

7. array/object의 경우 return 안쓰고 state.key 이렇게 직접수정해도 state 변경됨.

 

8. state 변경 함수에 파라미터 하나 더 뚫는 방법 : state 파라미터 옆에 새 파라미터 하나 더 작성하고 새 파라미터.payload 작성하면 됨. state 변경 함수들을 action이라고 하기 때문에 새 파라미터 작명은 보통 action이라고 함.