Redux란?
Redux를 사용하는 이유
리액트프로젝트의 구조는 대략 이러하다. 부모인 App에서 자식 컴포넌트랑 단방향적으로 소통하는 피라미드 형식이다. 컴포넌트 C에 변화를 주려면 컴포넌트(자식들)사이에서는 소통을 못하기 때문에 결국은 App에서 A로, A에서 C로 state가 옮겨져야 한다. 그래서 복잡한 프로젝트일 경우, App에 코드들이 엉켜있거나 너무 커져 코드읽기가 불편한 상황이 발생한다. 하지만 Redux를 이용하면 이것을 해결할 수 있다.
Redux의 개념
리덕스는 오픈 소스 자바스크립트 라이브러리의 일종으로, state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용한다. (출처: 위키백과)
리덕스를 사용하면 상태값을, 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥(스토어)에서 관리 할 수 있게 된다. 리덕스를 프로젝트에 적용시키면 스토어를 생성하는데 이것은 state를 관리하는 창고라고 볼수 있다. 만약 위 사진의 컴포넌트D에서 상태변화를 원하면 dispatch 라는 함수를 통하여 액션을 스토어한테 던져줍니다. 액션은 상태에 변화를 일으킬 때 참조 할 수 있는 객체다. 액션 객체는 필수적으로 type 라는 값을 반드시 가지고 있어야 하고 어떤 타입의 값이든 가질수 있는 payload는 선택사항이다.
상태변화가 나타나는 과정
리덕스를 사용할때 중요한 리액트 훅이 2개가 있다. 하나는 useSelector 이고 다른 하나는 useDispatch 다. 위에서 설명한 것처럼 액션을 스토어에 있는 리듀서에 던져줄때 dispatch를 통해 던져 준다. 그리고 그 액션별로 다른 상태변화를 리듀서에서 실행시킨다. 여기서 액션 별로 구분을 해줄때 if문이나 switch문을 이용한다.
Redux로 여러 예시 적용해보기
Redux를 리액트에 적용하여 이해를 쉽게 얻기 위해 여러예시에 적용해보았다.
증가 감소 카운터 만들기
증가 버튼을 누르면 1씩 증가가 되고 감소버튼을 누르면 1씩 감소하는 카운터이다.
코드
- store.js
import { createStore } from 'redux'
import reducer from './reducer/reducer'
let store = createStore(reducer)
export default store;- index.js
import { Provider } from 'react-redux';
import store from './redux/store';
<Provider store={store}>
<App />
</Provider>- App.js
import { useState } from 'react'
import {useDispatch,useSelector} from "react-redux"
const dispatch = useDispatch();
const count = useSelector(state=>state.count)
// useSelector로 count를 리듀서에서 가져와 state에 변화주기
const countUp=()=>{
dispatch({type:"INCREMENT"}) //증가
}
const countdown=()=>{
dispatch({type:"DECREMENT"}) //감소
} <h1>{count}</h1> //리듀서에서 초기값은 0
<button onClick={countUp}>증가!</button>
<button onClick={countdown}>감소</button>- Reducer.js
let initialState={
count:0,
//처음 state가 뭐가있는지 알려줘야함 (즉, 초기값)
}
function reducer(state=initialState,action){ //리듀서는 state와 action을 가져간다.
console.log("action??",action)
if(action.type === "INCREMENT"){ //dispatch를 통해 action을 받아옴
return {...state,count:state.count+1}
}
else if(action.type === "DECREMENT"){
return {...state,count:state.count-1}
}
// switch(action.type){
// case "INCREMENT": //switch문으로 한다면 이렇게!
// return{
// ...state, count:state.count+1 //1씩 증가한다.
// }
// default:
// return{...state}
// }
return {...state}; //state가 여러개일수있으니
//기존 state는 그대로두고 바꿀것만 바꾸기! ...state!
}
export default reducer;
증가버튼을 누르면 1씩 증가한다.
감소 버튼을 누르면 1씩 감소한다.
로그인 정보 보여주기
로그인 버튼을 눌렀을때 로그인 정보를 확인할 수 있는 코드를 짜보자
코드
- store.js
import { createStore } from 'redux'
import reducer from './reducer/reducer'
let store = createStore(reducer)
export default store;- App.js
let id = useSelector(state=>state.id)
let password = useSelector(state=>state.password)
const login = ()=>{
dispatch({type:"LOGIN",payload:{id:"gyu ri", password:"123456"}})
}
return (
<div>
<h1>{id},{password}</h1>
<button onClick={login}>로그인</button>
</div>
);
}
export default App;- Reducer.js
let initialState={
id:"",
password:"",
}
function reducer(state=initialState,action){
//리듀서는 state와 action을 가져간다.
console.log("action??",action)
if(action.type === "LOGIN"){
return{...state,id:action.payload.id,
password:action.payload.password}
}
return {...state};
}
export default reducer;
로그인 버튼을 클릭시 미리 주었던 정보를 사용자가 볼 수 있다.
