Context-API, Redux toolkit

𝔂𝓸𝓾𝓷𝓰𝓬𝓱𝓮𝓸𝓷·2022년 7월 10일

React

목록 보기

3/8

싱글페이지 어플리케이션 라이브러리인 리액트에서는
컴포넌트간 state 공유가 어려운데
부모 자식관계면 쓸 수 있음. 대신 props를 이용해 계속 줘야함
부모 자식관계인 A,B,C 컴포넌트에서 A에서 C로 주려면
props를 두번 써야하는 불편함이 있음
이러한 상황에서 Context API를 쓰면 건네줄수 있음.

import

import { createContext } from "react";

export let context1 = createContext();

<context1.Provider value={{ 건네줄변수 }}>
	<다른컴포넌트 건네줄변수={건네줄변수} />
</context1.Provider>

그럼 이제 context1로 감싼 모든컴포넌트와 그 자식 컴포넌트는
state를 props 전송없이 사용가능함.

다른 파일의 컴포넌트에서 갖다쓰기

import { context1 } from './../App.js';

function 다른컴포넌트(){
  let { 건네받은변수 } = useContext(Context1)
}

사실 변수가 하나라서 그런가 많이 불편해보이지만
중첩해서 사용한 컴포넌트가 많을때 편리한 문법이라고 함.

Context API의 단점

일단 문법이 많이 불편해보임, 불편함을 상쇄할정도로 State가 많으면 쓸만할듯
State변경시 쓸데없는 컴포넌트까지 전부 재렌더링

다음엔 Redux를 사용해보도록하자.

Redux toolkit

기본 제공하는 Context API가 불편해서 사용하는 외부 라이브러리다.

설치

(react, react-dom이 18.1 이상이어야함)

npm install @reduxjs/toolkit react-redux

Redux 세팅

store.js 파일을 만들어서 관리

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

index.js에서 Provider로 감싸줘야함.

import { Provider } from "react-redux";
import store from './store.js'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

State 보관하는 법

store.js

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({
  name : 'user',
  initialState : '유저이름'
})

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

보관한 State 가져다 쓰기

import { useSelector } from "react-redux"

function 대충컴포넌트라는뜻(){
  
  let 보관한거다불러오기 = useSelector((state) => { return state } )
  let 유저 = 보관한거다불러오기.user
 
  return 리턴
}

보관한 State 수정하기 (수정함수 만들기)

let user = createSlice({
  name : 'user',
  initialState : '유저이름',
  reducers : {
    changeName(state){ //state == 유저이름
      return "김영천"
    }
  }
}) ;

수정함수 다른파일에 내보내기

export let { changeName } = user.actions

수정함수 불러오기 (다른파일에서)

import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./../store.js"
let dispatch = useDispatch();

함수 쓰기

<button onClick={()=>{
  dispatch(changeName())
}}>버튼임</button>

언뜻보면 좀 복잡해보이는데 큰파일일수록 디버깅이 쉽다고함.

object타입의 State 변경하기

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      state.name = 'park'
    }
  }
})