Ryu.log

[ React redux 01 ] Redux의 소개 본문

Prev-content

[ React redux 01 ] Redux의 소개

류뚝딱 2018. 9. 4. 11:33



01. Redux의 소개

Redux에 대해서 알아보자. Redux는 React에서 상태를 더 효율적으로 관리하는데 사용되는 상태 관리 라이브러리이다.
이전에 진행했던 React프로젝트에서 상태관리 로직은 상태관리를 쉽게 하기위하여 App 컴포넌트에서 모든 로직을 처리했다.

App 컴포넌트에서 모든 상태로직을 관리했기 때문에 App 컴포넌트의 state를 업데이트하면,
App 컴포넌트가 리렌더링 되고, React의 특성상 하위 컴포넌트도 모두 리렌더링 된다.

그렇기 때문에 컴포넌트 최적화 과정에서 shouldComponentUpdate()를 통하여 방지해 주었는데,
기존 프로젝트의 경우에는 사용한 컴포넌트의 개수가 많지 않기 대문에 App 컴포넌트에서 상태관리를 하고, 
최적화 하는것이 그리 어렵지 않았다.

하지만 프로젝트가 좀더 복잡해지고 컴포넌트의 갯수가 많아지면, App 컴포넌트에서 모든 상태관리 로직을 처리하기에는 무리가 있다.
그리하여 Redux라는 상태관리 라이브러리가 나오게 되었다.


React컴포넌트 구조가 위와 같다고 할때, 하위 컴포넌트에서 상위 컴포넌트에 props를 전달 하기 위해서는

하위 컴포넌트에서 상위 컴포넌트로 여러 컴포넌트를 거쳐서 props를 전달하게 된다.


이런식으로 컴포넌트에 props를 전달하면 상당히 비효율 적이다. 이런식으로 전달하게 되면 불필요한 렌더링이 일어날 수 있으며

또한 최상위 컴포넌트인 App 컴포넌트 에서는 상태관리 로직이 너무 많아서 코드가 엄청나게 길어질 수도있다.


이러한 것들을 Redux라는 상태관리 도구를 사용하면 매우 매끄럽게 해결 가능하다.



Redux는 위 그림과 같이 Store라는 객체 내부에 상태를 담아서 모든 상태관리를 해준다.

상태에 어떤 변화를 일으켜야 할 때는 액션(action)이라는 것을 스토어에 전달한다, 액션은 객체 형태로 되어있으며,

상태를 변화시킬 때 이 객체를 참조하여 변화를 일으킨다. 액션을 전달하는 과정은 디스패치(dispatch)라 한다.


스토어가 액션을 받으면 리듀서(reducer)가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야 할지 정한다.

액션을 처리하면 새 상태를 스토어에 저장한다.


스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컴포넌트에 바로 전달한다. 부모 컴포넌트로 props를 전달하는 작업은 생략하며,

Redux에 연결하는 함수를 사용하여 컴포넌트를 스토어에 구독(subscribe) 시킨다.


갑자기 새로운 용어들을 접하여 조금 헷갈릴 수 있으니 용어들을 정리해보자.



  • 스토어 : 애플리케이션의 상태 값들을 내장하고 있다.
  • 액션 : 상태 변화를 일으킬 때 참조하는 객체
  • 디스패치 : 액션을 스토어에 전달하는 것을 의미한다.
  • 리듀서 : 상태를 변화시키는 로직이 있는 함수
  • 구독 : 스토어 값이 필요한 컴포넌트는 스토어를 구독한다. 





02. Redux 사용

리덕스는 리액트에서 사용하려고 만든 상태관리 라이브러리이긴 하나 리액트에 의존하지는 않는다.
즉, 리액트를 사용하지 않아도 리덕스를 사용할 수 있다.

따라서 리덕스를 리액트 프로젝트에 적용하여 사용하기 전에, 먼저 리액트 없이 리덕스를 사용해보며 각 개념을 익혀보자.
HTML이나 JavaScript를 사용하여 간단하게 페이지를 만들 수 있는 서비스인 JSBin(https://jsbin.com)으로 리덕스를 사용해보자.



우선 CDN을 이용하여 JSBin에서 리덕스를 불러와보자. HTML 영역의 코드에서 <body>...</body> 사이에 아래코드를입력해보자.


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<title>JS Bin</title>

</head>

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>

</body>

</html>


이렇게 파일을 불러오면 JavaScript 영역에서 리덕스를 사용할 수 있다. 실습과정에서는 DOM을 사용하지 않으니

HTML과 Output 영역은 비활성화 하고 JavaScript와 Console 영역만 활성화 시켜주자.



계속 진행하기 전에 먼저 리덕스를 잘 불러왔는지 확인 해보자. JavaScript영역에서 console.log(Redux)를 입력하고 오른쪽 Run 버튼을 눌러보자.



위 그림처럼 Redux의 정보가 console에 잘 찍힌다면 제대로 불러와진 것이다.



이 글은 Velopert님의 책을 실습하며 공부한 자료입니다.

저작자표시

'Prev-content' 카테고리의 다른 글

[ React redux 03 ] 변화를 일으키는 함수, 리듀서  (0) 2018.09.07
[ React redux 02 ] 액션과 액션 생성함수  (0) 2018.09.04
[ NodeJS 10 ] console 객체  (0) 2018.08.06
[ NodeJS 09 ] global 객체  (0) 2018.08.02
[ NodeJS 08 ] 모듈 시스템  (0) 2018.07.30
'Prev-content' Related Articles more
Comments