훈츠의 블로그 입니다.
안녕하세요. 훈츠입니다. 요즘 Web 프로젝트를 경험해보고 싶어서 새롭게 공부하고 있는 리액트 리덕스에 대한 정리 글입니다. 저 역시 리덕스를 잘모르는 관계로 정리 형태로 글을 남겨 봅니다.
원래 알고 있는데 기억이 안나시는 분에게는 도움이 될것 같습니다. 사실, 제가 나중에 기억 안날까봐 적는것도 있어서요. ^^
글 목록
- 리덕스 설명 및 설치 방법
- 리덕스 동작 레이아웃 설명
- 리덕스를 이용한 샘플 프로그램 동작 설명
- 리덕스를 이용한 샘플 프로그램 코드 설명
- 리덕스 DEV TOOL : 시간 여행 가능 Log 및 status
- 샘플 프로그램 코드 공유
리덕스 란? ( 원 스토어 시스템 )
리덕스 스토어라는 곳에 하나의 저장소를 만들고, 다른 여러곳에서 이 저장소에 있는 내용을 읽고 쓰게 만드는 중앙집중 장치 정도 라고 이해하면 좋을 듯합니다. 하지만 데이터를 쓰는 방법과 값을 가져가는 방법을 리덕스가 정해둔 방식으로 해야 하기 때문에 어떻게 값을 가져가고, 쓰는지 이해 하는것이 리덕스를 파악 하는 것 입니다. 다음 그림이 리덕스 라이브러리에 대해 잘 설명 합니다.
장점은 코드의 복잡성 을 낮출수 있습니다.
공식 사이트 주소 : https://redux.js.org/
설치 방법 (윈도우 기준)
. npm install --save redux (npm 이용시)
. yarn add redux (yarn 이용시)
window command 혹은 VScode 를 통해서 redux 를 설치해 줍니다.
리덕스 동작 레이아웃 설명
리덕스 코드를 보기 전에 다음 그림을 보시면 이후 코드 작성시 혹은 전체적인 리덕스 흐름을 이해하시는데 도움이 됩니다. 생활 코딩 egoing 님이 그림 그려주신게 있는데, 나름 저만의 방식으로 해석해보니 다음이 더 맞는거 같습니다. 이론적 말고, 생각의 흐름으로 이해 한 것입니다.
Redux.Store 회사 에는 네명의 직원 들이 있습니다. 각자 역활이 나눠져 있고 여기서 고객은 대상은 리액트로 한정 되지 않고 다른 고객들도 얼마든지 올수 있습니다.
MS.dispatch
회원 요구를 받아서 MR.reducer 에게 전달합니다.
MR.reducer
dispatch 로 부터 받은 요구를 적절하게 처리 합니다. 이때 직접 state 장부 에 내용을 저장 합니다.
MR.subscribe
고객이 지정해둔 화면에 데이터를 보고 있다가 변화가 생기면 Rander 로봇에게 전달 해줍니다.
Rander Robot
화면에 그림을 그리는역활을 하는 로봇입니다. 원래 수동으로 변화가 생겼다고 알려줘야 다시 그립니다. 여기서 다시 그리라고 하는 역활을 MR.subscribe 가 합니다.
MR.getState
고객이 데이터를 요청하면 state 장부를 읽기만 할수 있도록 복사본을 전달해 줍니다. 고객은 데이터를 볼수는 있지만 쓰지 못합니다. 데이터를 쓰는것은 오직 MR.reducer 씨만 가능한 업무 입니다.
리덕스를 이용한 샘플 프로그램 동작 설명
리액트를 이용하지 않고 순수 HTML , JavaScript 코드 만으로 원페이지 화면을 구성 했습니다. Create, Read, Update, Delete 가 가능 합니다. 다음 화면을 보시면 어렵지 않게 동작에 대해 이해 하실수 있습니다.
설명
리스트에 HTML, CSS 링크를 누르면 아래 화면에 타이틀과 설명문이 나옵니다.
CREATE : create 링크를 누르면 타이틀과 설명글을 적을수 있는 화면으로 전환되고, 타이틀과 설명글을 적고 제출을 누르면 리스트에 추가 되면서, 해당 화면으로 이동 합니다.
READ : read 는 리스트중 하나를 선택하면, 선택된 타이틀과 설명문이 아래 표기 됩니다.
UPDATE : update 를 하기 위해서는 리스트중 하나를 선택 하고, 그 속에서 update 를 누르면 타이틀과 설명글에 선택된 내용이 표기 되고 수정후, 제출 버튼을 누르면 내용이 업데이트 됩니다.
DELETE : delete 를 하기 위해서는 리스트중 하나를 선택하고, delete 버튼을 누르면 선택된 내용이 사라지고, Welcome page 로 이동합니다.
느낌은 확실히 리액트로 구성했을때보다 간단하게 구성할수 있었습니다.
리덕스를 이용한 샘플 프로그램 코드 설명
HTML 과 JavaScript 코드 로만 작성 하였습니다. HTML 및 JavaScrpit 에 대한 설명 말고, 리덕스 관련한 부분만 설명하겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 리덕스 가져오는 스크립트 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.js"></script>
<title>Redux Sample project</title>
</head>
<body>
<div id="subject"></div>
<div id="toc"></div>
<div id ="control"> </div>
<div id ="content"> </div>
<script>
// MR.리듀서
function reducer(state, action){ }
// 리덕스 스토어 만들기
var store = Redux.createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
// MR. 서브 스크라이브
store.subscribe(content); //와우 요렇게 등록만 시키면 체인지가 일어나면 변화시킨다.
store.subscribe(TOC);
store.subscribe(control);
//일반 자바스크립트 코드
//이 안에 ,MR. 디스패치 와 MR. 겟스테이트 가있습니다.
function subject(){
var state = store.getState();
var action ={type:'SELECT',id:${state.contents[i].id}, mode:'read'}
store.dispatch(action);
}
subject(){};
....이하 생략
</script>
</body>
</html>
|
cs |
위 코드는 설명을 위해 생략된 부분이 많은 코드 입니다. 설명을 위해서 적어놓은 코드이니 코드를 보고 싶으시면 하단에 코드공유를 다운받으세요.
그림 에서 설명 드린것 처럼 위와 같은 코드 구조를 가지고 있습니다.
사용 설명서
리덕스 가져오기
리덕스를 사용하기 위해서는 설치 하고 맨위 코드중 리덕스 가져오는 스크립트를 넣어 줘야 합니다. npm 에서 설치된 리덕스 버전을 확인후, 버전만 수정해서 사용하시면 됩니다.
리덕스 스토어 만들기
코드처럼 Redux.createStore(reducer) 만 입력하면 됩니다. 코드에 reducer , 이하 뒷 부분은 REDUX Dev 툴을 위한 부분이니 처음에는 생략하시고 만드시면 됩니다.
리듀서 만들기
그림 처럼 리듀서 안에 state 를 만들고 그안에 데이터를 만드는 형태 입니다. 리듀서 형태는 아래를 보고 참조하세요.
리듀서는 함수 매개변수로 두가지 인자를 같습니다. state 와 action 입니다. state는 현재 상태 action 은 Dispatch 씨로 부터 받은 action 입니다. 그리고 최초 state 는 undefined 상태로 아래 코드에서 state 를 초기 세팅 하는곳이 나옵니다. 코드 작성은 아래와 같이 하면 됩니다. 그리고 action .type은 Dispatch 에서 리듀서로 값을 전달해줄때 받는 값으로 아래 코드와 디스패치 코드를 같이 보시면 이해가 쉽습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
<body>
<script>
// MR.리듀서
function reducer(state, action){
if(state === undefined){
return{
seleted_id : null,
contents:[
{id:1, title:'HTML',dsc:'HTML is...'},
{id:2, title:'CSS',dsc:'CSS is...'}
]
}
}
var newState ='';
if(action.type === 'SELECT'){
newState = Object.assign({}, state, {seleted_id : action.id, mode:action.mode
});
}
console.log('action : ', action);
console.log('state : ', state);
console.log('newState : ', newState);
return newState;
};
</script>
</body>
</html>
|
cs |
디스패치 와 겟스테이트 만들기
디스패치를 통해서 값을 보내는 코드 입니다. 때에 맞춰서 프로그램 해주면 되므로 어떻게 보내는지 만 확인 해보세요.
아래 코드에서 type : '이부분이 액션 type을 주는 부분입니다. ' 그리고 이하 id 는 일반 함수의 매개변수 전달해주는것과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
<body>
<script>
// MR.디스패치 &
function (){
var state = store.getState(); // getState로 값 가져오기
<a onclick="
event.preventDefault();
var action ={type:'SELECT',id:${state.contents[i].id}, mode:'read'} //type : 바로 이부분입니다.
store.dispatch(action);
/////이하 코드 생략....
</script>
</body>
</html>
|
cs |
서브스크라이브 만들기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
<body>
<script>
// MR. 서브 스크라이브
store.subscribe(content); //와우 요렇게 등록만 시키면 체인지가 일어나면 변화시킨다.
/////이하 코드 생략....
</script>
</body>
</html>
|
cs |
위와 같이 코드를 등록하면, 값이 변화가 생기면 해당하는 화면페이지를 렌더로봇에게 시켜서 화면을 갱신시켜 줍니다.
리덕스 DEV TOOL : 시간 여행 가능 Log 및 status
리덕스 DEV TOOL 을 이용하면 마치 화면을 녹화한것처럼 코드의 흐름을 녹화 할수 있습니다. 저도 잠깐 해본정도라 어느정도까지 활용할수 있을지는 모르겠지만, 이 기능 때문에 리덕스가 대성공을 거두었다고? 하더라고요. 신기하긴 합니다. 하는법도 그렇게 어렵지 않으니 다음 몇가지 추가해주면 쉽게 경험해볼수 있으니 한번 시도해보세요.
사용법
사이트 : http://extension.remotedev.io/
1. 크롬 혹은 사용하는 Web 브라우저에 설치
2. npm install redux-devtools 설치
3. createStore( window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); 코드 추가
|
1
2
3
4
5
6
7
8
9
10
11
|
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
<body>
<script>
// 리덕스 스토어 만들기
var store = Redux.createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
/////이하 코드 생략....
</script>
</body>
</html>
|
cs |
devTool 영상을 보시면 state 값이라든지 좀더 손쉽게 디버깅이 가능할것 같습니다. 실제로 돌려보고 어디에 문제가 발생하는지도 알고, 참 획기적이네요. ^^
샘플 프로그램 코드 공유
rain2002kr/ReduxExam200613
리덕스[생활코딩] 완료버전. Contribute to rain2002kr/ReduxExam200613 development by creating an account on GitHub.
github.com
감사합니다. 리덕스 진짜 만들어보고 정리 해보니 너무 좋은것 같습니다. 꼭 사용해보세요~
'리액트' 카테고리의 다른 글
| 리액트 & 노드JS 서버 연동 (Http-proxy-middleware) (0) | 2020.07.09 |
|---|---|
| [리액트 react] 리액트 기본 실행 포트 변경 하기 (0) | 2020.06.26 |
| [react 리액트] 리액트 시작 create-react-app (0) | 2020.06.21 |
| [React] 리액트 Create (0) | 2020.06.12 |
| [React] 리액트 (props, state, event) (0) | 2020.06.11 |