[React] Redux

서론

여러 채용 공고를 보면 필수 기술 스택에 상태 관리 라이브러리가 적혀있는 게 많다
상태 관리 라이브러리를 요구하는 곳은 특히 redux가 많다
실무에서 써보긴 했지만 오래 됐기도 했고 Toolkit이 나오고 마이그레이션 작업을 내가 안 해서 잘 모른다,,,

참고

• redux 공식 문서

Redux란

애플리케이션의 상태를 관리하는 라이브러리

• React 뿐만 아니라 다양한 환경에서 사용되는 라이브러리
• 리액트로 프론트엔드를 시작한 나로써는 전역 상태 관리를 라이브러리 없이 해 본 적이 없긴 한데
• 전역 상태 관리를 편리하게 관리할 수 있게 하는 라이브러리
• zustand, recoil와 같은 유사 라이브러리도 있고 context라는 리액트 자체 api도 있으므로 규모에 따라 필요하다면 기술 검토 후 사용 권장
• 전역 상태가 되도록 없는 게 좋다고 함

Redux 기본

• 앱의 전역 상태를 관리함
• 불변성을 강조하여 객체 형태의 상태를 액션으로만 조작할 수 있어야 함
• 기본 적으로 스토어, 액션, 리듀서로 구성 되어있음

action

• 애플리케이션에서 발생한 일을 설명하는 이벤트 객체

const exampleAction = {
	type: '<<type>>',
    payload: '<<session>>'
}

• 로그인 이벤트 객체(액션) 생성
• 이 이벤트의 타입과 이 이벤트 발생 시 전달 받을 payload 작성

reducer

• 현재 상태와 상태를 관리하는 action객체를 전달 받아 상태 업데이트를 어떻게 할 지 결정하여 새로운 상태를 반환하는 함수

const initialState = { value: '' }

const exampleReducer = (state = initialState, action) => {
  
  if(action.type === '<<type1>>'){
  	return {...state, count: state.count + 1 }
  }else if (action.type === '<<type2>>'){
  	//...
  }
  
  return state
}

이름이 reducer인 이유

• Array.reducer와 같은 동작을 하기 때문!
• reducer에서의 state는 reviousResult
• reducer에서의 action은 currentItem
• 둘 다 반환 값이 다음 상태 값이 된다

const result = Array.reducer((previousResult, currentItem)=>{
  
  	//...
  return //..
}, initialValue)

store

• 리덕스가 관리하는 전역 상태 데이터 저장소(객체)
• 앞서 생성한 리듀서를 사용해 생성한다

// store 생성

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: exampleReducer })

console.log(store.getState())
// {value: 0}
      

상태 업데이트 하기

• store객체에 있는 dispatch 메서드를 사용해 업데이트
• dispatch 메서드 인수로 액션 객체를 넣어 원하는 동작을 하도록 함
• dispatch와 action을 이용하는 방법으로만 상태 업데이트가 가능함

store.dispatch(exampleAction)

// action에 정의된 타입으로
// reducer에서 정의한 동작으로
// 상태가 변경되어 저장됨

provider

• redux를 사용하기 위해서는 provider로 스토어에 접근할 컴포넌트를 감싸야 한다
• provider 바깥 컴포넌트에서는 스토어에 접근이 불가능

return (
	<div>
    	<Provider store={exampleStore}>
    		<Input />
    	</Provider>
    	<Button /> 
    </div>
)

• Input 컴포넌트에서는 exampleStore 객체에 접근 가능
• Button 컴포넌트는 provider의 자식이 아니기 때문에 exampleStore 객체에 접근 불가

마무리

리액트 프로젝트를 이제 시작할 예정인데 작은 규모라도 일부러라도 전역상태 관리 라이브러리를 사용할 예정이다! 다음 글에서는 로그인 세션저장을 리덕스로 구현하여 기존에 리덕스 없이 세션 저장한 로직과 비교할 예정이다