[React] 상태관리 Redux / ContextAPI

⚙️Redux가 좋은점?

👍🏻 props 전송 과정 없이 모든 컴포넌트가 state에 접근하여 사용할 수 있다!
👍🏻 상태관리에 유용

설치

npm install react-router-dom
npm install redux react-redux

기본 세팅

• index.js

import { BrowserRouter } from 'react-router-dom';
import {Provider} from 'react-redux';
import {createStore} from 'redux';

const reduxState = 100;
function reducer(state = reduxState, action){
  return state
}
let store = createStore(reducer)

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <Redux />
    </Provider>
  </BrowserRouter>,
  document.getElementById('root')
);

👍🏻 Provider에서 넘겨준 state는 <Redux /> 뿐 아니라 다른 여러개의 컴포넌트에서도 꺼내 사용할 수 있다!

👍 Component에서 state 사용 방법

useSelector, useDispatch 등 편한 훅스가 있어서 connect함수를 많이쓰진 않는다

useSelector

• Redux.js

import React from 'react'; 
import {useSelector} from 'react-redux';

function Redux(){

    const gotReduxState = useSelector( (state) => state);

    return(
        <div>
             받아온 redux state : {gotReduxState} (useSelector)
        </div>
    )
}

export default Redux;

connect

• Redux.js

import React from 'react'; 

function Redux(props){
    return (
        <div>
        	받아온 redux state : {props.gotReduxState} (connect)
        </div>
    )
}

function stateToProps(props){ 
    return {
        gotReduxState : props
    }
}

export default connect(stateToProps)(Redux);

결과는 같다! (소스코드)

👍 상태관리

reducer action

//index.js
const reduxState = 100;
function reducer(state = reduxState, action){
  if (action.type === "plus"){
    state++;
    return state 
  }
  else{
    return state
  }
}
let store = createStore(reducer);

reducer dispatch

//Redux.js
function Redux(){
    const gotReduxState = useSelector( (state) => state);
    const dispatch = useDispatch();
    return(
        <div>
            <button onClick={()=>{ dispatch( {type:'plus'} ) }}> PLUS </button>
        </div>
    )
}

export default Redux;

여러개의 reducer

🌟 store는 하나여야 한다 !!
reducer가 여러개라면 ? combineReducers!

// index.js
const reduxState = 100;
function reducer(state = reduxState, action){
  if (action.type === "plus"){
    state++;
    return state 
  } else{
    return state
  }
}

const reduxState2 = 200;
function reducer2(state = reduxState2, action){
  if (action.type === "plus"){
    state++;
    return state 
  } else{
    return state
  }
}

let store = createStore(combineReducers({reducer, reducer2}));

//Redux.js
const gotReduxState = useSelector( (state) => state.reducer);

useSelector 인자는 콜백함수
그 콜백함수의 인자로 state가 전부 포함된 객체, 즉 index.js에서 Provider로 넘겨준 store의 reducer의 state객체(값)

const gotReduxState = useSelector( (state) => console.log(state));

여러개의 reducer를 combine해서 사용한 경우 사용할 state객체를 지정해주어야 한다!

    const gotReduxState = useSelector( (state) => state.reducer);

useReducer

🤔 useDispatch 는 Store의 기능인 dispatch를 함수에서 사용 가능하게 해주는 hook 입니다.
마찬가지로 (reducer,초기상태)를 인자로 받는 훅스가 useReducer
const [state, dispatch] = useReducer(reducer, initialState);
여러 컴포넌트에 걸쳐 사용되고 수정되는 state라면 useState 대신 사용할 수 있음.

// Redux.js에서
import child from './Child'
< Child />

//Child.js
import React, {useReducer} from 'react'; 

const initialState = {
    inputs: {
      value: 'InitialStateValue',
    }
}
function reducer(state, action) {
    if (action.type === 'change'){
        return {
            ...state,
            inputs: {
              ...state.inputs,
              value: action.payload
            }
          };
    }
    return state;
  }
  
function UseReducer(){
    const [state, dispatch] = useReducer(reducer, initialState);
    return(
        <div>
            UseReducer.js에서 {state.inputs.value}
            <button onClick={()=>{ dispatch( {type:'change', payload:'NewStateValue'} ) }}> CHANGE </button>
        </div>
    )
}

export default UseReducer;

⚙️ Context API

• 프로젝트에서 전역으로 사용할 수 있는 값을 관리
  값 또는 상태, 함수, 외부 라이브러리 인스턴스 , DOM 등도 가능
  

< ContetAPI와 dispatch를 함께 사용하는 예제 >

React.createContext()

export const UserDispatch = React.createContext(null);

createContext의 파라미터는 Context의 기본값이다.

.Provider

  const [state, dispatch] = useReducer(reducer, initialState);
	...
   return(
    <UserDispatch.Provider value={dispatch}>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onToggle={onToggle} onRemove={onRemove} />
    </UserDispatch.Provider>

<UserList >안에 다음과 같이 <User >가 있다면,

  return (
   <div>
     {users.map(user => (
       <User user={user} key={user.id} />
     ))}
   </div>
 );

<User > 에서도 dispatch에 접근하여 사용할 수 있다.

  const dispatch = useContext(UserDispatch);
 return (
   <div>
     <b
       onClick={() => {
         dispatch({ type: 'TOGGLE_USER', id: user.id });
       }}
     >
    ...

전달하는 컴포넌트에서
export const 이름 = React.createContext();
<이름.Provider value = {전달할값}>
<전달받을 컴포넌트 />
</이름.Provider>

전달받을 컴포넌트에서
const 받아서저장할이름 = useContext(전달 이름);