[React] Redux

Redux

상태관리 라이브러리중 하나로 컴포넌트가 많은 상황에서 props를 하나하나 내려서 받는게 아닌 Redux로 만든 하나의 공간에서 props를 바로 내려줘 상태관리를 보다 쉽게 할수 있게 해준다.

Redux설치, 셋팅

Redux를 설치 후 Redux에서 사용하는 변수를 저장하는 공간으로 사용할 아무 .js파일에 다음과같이 입력한다.

import { Provider } from 'react-redux';
import { createStore } from 'redux'; // 다운받은 redux라이브러리를 불러준다.

const count = 100 // 원하는 변수를 만들어 준다.

function reducer(state = count, acrion){
 	return state 
}

let store = createStore(reducer)

root.render(
	<Provider store={store}>
		<App />
	</Provider>
);

기본적으로 이렇게 셋팅을 해주고 원하는 변수를 만들어서 넣어준다.

Store에 저장한 state사용하기

import { useSelector } from 'react-redux';

function App(){
  const state = useSelector((state) => state); // Store에서 원하는 데이터를 꺼내온다.
  
  return (
  	<div>
    	<p> count : {state} </p>
    </div>
  )
  
}

Store에 reducer값 지정하기

Redux에서는 state수정 방법을 미리 작성해 놓을 수 있는데 이는 Redux의 특징중 상태관리를 쉽게 하기위함 이다. 컴포넌트들은 요청만 할 수 있게 작동하면 변수를 통한 오류가 발생했을때 전체 컴포넌트를 보는것이 아닌 Redux의 Store만 확인하면 더욱 쉽게 해결 가능해진다.

import { Provider } from 'react-redux';
import { createStore } from 'redux'; 

const count = 100 

function reducer(state = count, acrion){
 	if(action.type === 'UP'){ // UP요청을 하면 state를 +1 해준다.
      state++;
      return state 
    } else if(action.type ==='DOWN'){ // UP요청을 하면 state를 -1 해준다.
   	  state--;
      return state 
    } else {
      return state 
    }
}

let store = createStore(reducer)

root.render(
	<Provider store={store}>
		<App />
	</Provider>
);

컴포넌트에서 state 수정 요청하기(dispatch)

수정한 state를 불러오고 싶을때는 불러오고싶은 컴포넌트에서 Redux의 내장 메서드인 dispatch를 사용한다.

import { useDispatch, useSelector } from 'react-redux';

function App(){
  const state = useSelector((state) => state); 
  const dispatch = useDispatch()
  
  return (
  	<div>
    	<p> count : {state} </p>
		<button onClick={() => { dispatch({type : 'UP'}) }}> Plus </button> 
// type에 reducer에서 작성한 원하는 tpye의 요청을 불러온다.
    </div>
  )
}