[React] 리덕스 시작하기 (redux, react-redux)

🕵🏻‍♀️ 리덕스를 사용하는 이유

1. 단방향 데이터 흐름의 탄생

• 양방향 데이터 흐름은 한 개의 모델이 여러 뷰를 조작하거나, 한 개의 뷰가 여러 모델을 조작할 수 있다. 이는 데이터 흐름을 이해하고 버그를 찾는 것을 방해한다. 이와 같은 이유로 단방향 데이터 흐름이 탄생했다.
• 단방향 데이터 흐름(= redux가 작동하는 방식)은 데이터가 한방향으로만 흐르기 때문에 데이터 흐름을 예측하기 쉽다.

1. 편리한 state 관리

• redux를 사용하지 않으면 react 컴포넌트 들은 각각 개별적으로 state를 관리합다.
• redux를 사용하면 state를 관리하는 전용 장소(store)에서 상태를 관리하고 컴포넌트는 그걸 보여주기만 하는 용도로 쓰인다.

 

🕵🏻‍♀️ redux적용 및 개념

✔ 필요한 패캐지 설치

npm install redux
npm install react-redux

✔ action

액션은 무슨일이 일어났는지 설명해주는 객체이다. 예를 들어 user라는 state를 수정해 주는 역할을 하는 액션은 SET_USER와 같이 선언하고, setUser(user)라는 함수형태의 action creator을 만들어 주면 된다.

액션 선언 (대부분 대문자로 선언)

const SET_WINNER = 'SET_WINNER';
const CLICK_CELL = 'CLICK_CELL'; 
const CHANGE_TURN = 'CHANGE_TURN';

액션을 반환하는 action creators(액션 생성 함수)

export const setWinner(user) {
	return {type: SET_WINNER, user}
}

✔ reducer

• reducer는 state와 action을 파라미터로 받아와서 state를 변경하는 함수이다.
• action에는 액션 생성 함수에서 반환하는 객체가 들어간다.
• return 에서 다른 state값은 변경되지 않게 하기 위해 전개연산자를 사용한다.
• reducer를 작성할 때 switch 문을 자주 사용한다.

const reducer = (state = initState, action) => {
	switch (action.type) {
		case Action이름:
			return {
					...state,
					바꿀 state: 지정 값
			}
	}
}

• 각 컴포넌트 별로 리듀서를 작성했다면 이를 통합해야 한다. 이때 combineReducers()를 사용한다.

import { combineReducers } from 'redux';
import memberDetail from './memberDetail';
import member from './member';

export default combineReducers({
    memberDetail,
    member,
});

✔ store

• 데이터가 저장되는 가상 공간이다.
• combineReducers()를 통해 통합된 reducer와 initState(state 초기값)를 준비한다.

import { createStore } from 'redux';
const store = createStore(rootReducer);

• store을 적용하기 위해서 'index.js'를 아래와 같이 수정해 주어야한다.
• store 옵션을 설정한 <Provider> 태그로 App component를 감싸준다.

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './store/modules';

const store = createStore(rootReducer);

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

reportWebVitals()

✔ dispatch

dispatch로 action을 발생시킨다.

import { setMembersToStore } from '../../store/modules/member';
import { useDispatch } from 'react-redux';

const dispatch = useDispatch();
const saveMembersToStore = data => dispatch(setMembersToStore(data));
...
saveMembersToStore(member);

< useDispatch에 대한 설명은 아래 링크를 참고! >

[React] useSelector, useDispatch로 state에 접근하기

---

 

😼 전체 적용 예시 github

Hyun-juhee/Sopt27-Web