개발자의 개발 블로그

어플리케이션에서 데이터 교류 및 state 관리를 쉽고 효율적으로 하게 해준다.

Redux는 React.js 외에도, jQuery 혹은 Angular 를 사용하는 어플리케이션에서도 사용 될 수 있다.

즉, JavaScript 어플리케이션에서 data-state 와 UI-state 를 관리해주는 도구이다.

React에서의 데이터 흐름은 단일 방향으로만 흐른다.

parent-child 관계를 통하여 데이터를 교류하게 된다.

컴포넌트 갯수가 많아진다면.. 혹은 데이터를 교류 할 컴포넌트들이 복잡해지기떄문에 한계가 있다. 

그렇다고 parent-child 관계를 지키지않고 컴포넌트끼리 직접 데이터를 교류하는 방법이 가능하다. 

하지만, React 에선 절대 권장되지 않는 방법이다. 

코드 및 구조가 정말 복잡해지고, 잘못하다간 스파게티와 같은 코드가 만들어질 수있기 때문이다.

이러한 문제를 해결하기 위해 나온 개념이 바로 Flux이다. 

Flux는 디자인패턴이다. 이것은 기존의 MVC 패턴을 좀 더 발전시켜 만든 디자인 패턴이다.

MVC 패턴은 Model과 View가 늘어난다면 매우 복잡해진다. 

위 문제를 해결하기 위해서 FLUX 라는 디자인 패턴이 만들어졌다. 

시스템에서 어떠한 Action 을 받았을 때, Dispatcher는 받은 Action들을 통제하여 Store에 있는 

데이터를 업데이트한다. 그리고 변동된 데이터가 있으면 View가 다시 렌더링된다. 

그리고, View에서 Dispatcher로 Action을 보낼 수도 있다. 

Dispatcher은 작업이 중첩되지 않도록 해준다. 

즉, 어떤 Action이 Dispatcher를 통하여 Store에 있는 데이터를 처리하고, 

그 작업이 끝날 때 까지 다른 Action들을 대기시킨다.

Redux는 Flux 아키텍쳐를 좀 더 편하게 사용 할 수 있도록 해주는 라이브러리이다.

store에서 모든 데이터를 담고 있고, 

컴포넌트끼리는 직접 교류하지 않고 store 중간자를 통하여 교류한다.

1. 패키지 매니져..  초콜렛을 설치한다.

$choco install nodejs.install $choco install python2

노드 js와 python2를 설치한다. 그다음, 

$npm install -g react-native-cli

좀 오래걸린다.  설치를 다 했다면,

1. 안드로이드 스튜디오가 깔려있지 않다면 다운로드 받아야 한다.

2. 원하는 디렉토리로 이동 후,

3  AVD를 실행시킨 뒤, 켜지면, 명령어를 입력하러 cmd로 들어간다.

$react-native init <원하는 폴더명> $cd <원하는 폴더명> $react-native run-android // 에뮬레이터에 react-native앱을 실행시키겠다는 명령어

이렇게 하면, 에뮬레이터에 뜬다.

만약 에러가 발생한다면, sdk의 환경 변수 문제이므로 시스템 속성 - 환경 변수에 

platform-tools와 tools의 경로를 추가해주면 된다.

에뮬레이터에 Welcome 어쩌고가 나오면 예제 띄우기 성!공!

3. Android Debugging Menu 띄우기 : 에뮬레이터에서 Ctrl + M을 입력하여 띄울 수 있음.

Node.js에서는 직접 별도의 모듈을 정의하여 사용하지 않더라도 

기본적으로 수많은 내장된 모듈을 지원한다. 하지만, 너무 많기떄문에 다 외워서 사용할 수는 없다.

6개월마다 노드 버전이 바뀌고 있기때문에 기능이 빠르게 추가되고 삭제되기 때문이다.

그러므로 기본적인 사용법만을 익히고 구체적인것은 노드js

os모듈 : 그냥 현재 실행중인 컴퓨터의 운영체제에 대한 다양한 정보를 읽어올 수 있는 기능이다.

그다지 중요하진 않다. 그냥 시스템 속성보면 다 나옴..ㅋ

하여튼 중요한 것은 노드js에서 모듈을 사용하기 위해서는 require()함수를 사용한다.

var os = require('os');

그 다음에 변수 os를 사용하여 여러가지 메소드들을 호출하면 os모듈로부터 정보를 얻을 수 있다.

url 모듈 : 이 모듈을 사용하고 싶은 때 불러오는 선언은 마찮가지다. var url = require('url');

이 모듈에서 가장 대표적인 함수는 parse()함수이다.

이 함수는 일반적인 문자열  그중 URL 주소 문자열을 URL 객체로 변환하여 리턴한다.