[항해99] 리액트 기초반 - 3주차(3-7~3-13)

3-7. 리덕스를 통한 리액트 상태 관리

리덕스란?

=> 전역 상태 저장소. 상태관리 라이브러리

==>장점) 여러 컴포넌트가 동일한 상태를 보고 있을 때 굉장히 유용. 코드 깔끔. 유지보수 굳.

전역데이터가 있는 곳 : 스토어

데이터를 실제로 수정하는 곳 : 리듀서

 

[리덕스 상태관리 흐름도]

• (1) 리덕스 Store를 Component에 연결한다.
• (2) Component에서 상태 변화가 필요할 때 Action을 부른다. ("액션을 디스패치했다", "액션을 일으켰다" )
• (3) Reducer를 통해서 새로운 상태 값을 만들고,
• (4) 새 상태값을 Store에 저장한다.
• (5) Component는 새로운 상태값을 받아온다. (props를 통해 받아오니까, 다시 랜더링 되겠죠?)

 

3-8. 리덕스 살펴보기

리덕스 패키지 설치

yarn add redux react-redux

redux : 리덕스 패키지

react-redux : 리액트에서 편하게 쓸 수 있게 해주는 패키지

 

리덕스 공식문서 참고! 설명 잘 되어 있음!

https://ko.redux.js.org/introduction/getting-started/

Redux 시작하기 | Redux

 

리덕스는 리액트와 별도로 사용할 수 있다. 상태관리를 위해 다른 프론트엔드 프레임워크/라이브러리와 함께 쓸 수 있다.

 

<리덕스 개념과 용어>

 

(1) State

👉 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 돼요!)를 state라고 불러요. 딕셔너리 형태({[key]: value})형태로 보관합니다.

 

(2) Action

👉 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 발생하는 것입니다. ("수정할래!")

// 액션은 객체예요. 이런 식으로 쓰여요. type은 이름같은 거예요! 저희가 정하는 임의의 문자열을 넣습니다. 
{type: 'CHANGE_STATE', data: {...}}

 

(3) ActionCreator

 👉 액션 생성 함수라고도 부릅니다. 액션을 만들기 위해 사용합니다.

//이름 그대로 함수예요!
const changeState = (new_data) => {
// 액션을 리턴합니다! (액션 생성 함수니까요. 제가 너무 당연한 이야기를 했나요? :))
	return {
		type: 'CHANGE_STATE',
		data: new_data
	}
}

 

(4) Reducer

👉 리덕스에 저장된 상태(=데이터)를 변경하는 함수입니다. 우리가 액션 생성 함수를 부르고 → 액션을 만들면 → 리듀서가 현재 상태(=데이터)와 액션 객체를 받아서 → 새로운 데이터를 만들고 → 리턴해줍니다.

// 기본 상태값을 임의로 정해줬어요.
const initialState = {
	name: 'mean0'
}

function reducer(state = initialState, action) {
	switch(action.type){

		// action의 타입마다 케이스문을 걸어주면, 
		// 액션에 따라서 새로운 값을 돌려줍니다!
		case CHANGE_STATE: 
			return {name: 'mean1'};

		default: 
			return false;
	}	
}

 

(5) Store

👉 우리 프로젝트에 리덕스를 적용하기 위해 만드는 거예요! 스토어에는 리듀서, 현재 애플리케이션 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇 가지 내장 함수가 포함되어 있습니다. 생김새는 딕셔너리 혹은 json처럼 생겼어요. 내장함수를 어디서 보냐구요? → 공식문서에서요! 😉

 

(6) dispatch

👉디스패치는 우리가 앞으로 정말 많이 쓸 스토어의 내장 함수예요! 액션을 발생 시키는 역할을 합니다.

//실제론 이보다 코드가 길지만, //간단히 표현하자면 이런 식으로 우리가 발생시키고자 하는 액션을 파라미터로 넘겨서 사용합니다.
dispatch(action);

리덕스의 3가지 특징

(1) store는 1개만 쓴다!

(2) store의 state(데이터)는 오직 action으로만 변경할 수 있다!

리덕스에 저장된 데이터 = 상태 = state는 읽기 전용입니다. 
그런데... 액션으로 변경을 일으킨다면서요? 리듀서에서 변한다고 했잖아요?
 → 네, 그것도 맞아요. 조금 더 정확히 해볼까요! 가지고 있던 값을 수정하지 않고, 새로운 값을 만들어서 상태를 갈아끼웁니다!

(3) 어떤 요청이 와도 리듀서는 같은 동작을 해야한다!

리듀서는 순수한 함수여야 한다
는 말입니다. 순수한 함수라는 건, - 파라미터 외의 값에 의존하지 않아야하고, - 이전 상태는 수정하지(=건드리지) 않는다. (변화를 준 새로운 객체를 return 해야합니다.) - 파라미터가 같으면, 항상 같은 값을 반환 - 리듀서는 이전 상태와 액션을 파라미터로 받는다.

3-9. 리덕스 써보기

🦆덕스(ducks) 구조 

-보통 리덕스를 사용할 때는, action, actionCreator, reducer를 분리해서 작성

-모양새로 묶는 대신 기능으로 묶어 작성

 

덕스 구조로 리덕스 모듈 만들기!

1)첫번째 모듈 만들기

 - src 폴더 아래에 redux라는 폴더를 만들고, 그 안에 modules라는 폴더 생성

- modules 아래에 bucket.js라는 파일을 만들고 리덕스 모듈 만들기

 

리덕스모듈예제 ↓

// widgets.js

// Actions
const LOAD   = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';

// Reducer
export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    // do reducer stuff
    default: return state;
  }
}

// Action Creators
export function loadWidgets() {
  return { type: LOAD };
}

export function createWidget(widget) {
  return { type: CREATE, widget };
}

export function updateWidget(widget) {
  return { type: UPDATE, widget };
}

export function removeWidget(widget) {
  return { type: REMOVE, widget };
}

// side effects, only as applicable
// e.g. thunks, epics, etc
export function getWidget () {
  return dispatch => get('/widget').then(widget => dispatch(updateWidget(widget)))
}

(1) Action

(2) initialState

(3) Action Creactor

(4) Reducer

load할 땐, 가지고 있던 기본값을 그대로 뿌려주면 되겠죠? create할 땐, 새로 받아온 값을 가지고 있던 값에 더해서 리턴해주면 될거예요!

(5) Store

redux 폴더 하위에 configStore.js 파일을 만들고 스토어 만들기

3-10. 리덕스와 컴포넌트를 연결하자!

Store 연결하기

(1) index.js

// 우리의 버킷리스트에 리덕스를 주입해줄 프로바이더를 불러옵니다!
import { Provider } from "react-redux";
// 연결할 스토어도 가지고 와요.
import store from "./redux/configStore";

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

3-11. 컴포넌트에서 리덕스 데이터 사용하기

(1) 컴포넌트에서 리덕스 데이터 사용하기

-1) 리덕스 훅(https://react-redux.js.org/api/hooks)

// useDispatch는 데이터를 업데이트할 때,
// useSelector는 데이터를 가져올 때 씁니다.
import {useDispatch, useSelector} from "react-redux";

-2) BucketList.js에서 redux 데이터 가져오기

 

 

3-12. Quiz_버킷 리스트 데이터를 삭제해보기

✍버킷 리스트 상세에서 삭제 버튼을 추가하고 리덕스에서 빼보자

 

 3-13. 끝