Flux
- Model과 View의 연결성이 복잡해지면서 구현하는 것과 연결성을 이해하는 것에 어려움이 생겼고,
이를 해결하기 위해 나온 아키텍처 형태
- 사용자의 입력 데이터, 객체를 Action이라 합니다. 사용자가 조작하는 것, 그것이 어떤 행동이 될 수 있고 어떤 물체가 될 수 있습니다. 이를 모두 액션이라 부릅니다.
- 액션을 거쳐 들어온 정보(데이터)는 디스패처(Dispatcher)를 통해 스토어(Store)에 등록됩니다.
- 디스패처는 모든 데이터의 흐름을 관리하는 이벤트 관리자로 생각하면 됩니다.
- 스토어에서는 애플리케이션의 상태와 로직을 저장하는 장소입니다. MVC 모델 중 Model과 비슷한 역할을 하며, 애플리케이션 자체 도메인에서 상태를 관리할 수 있습니다. 디스패처를 사용해서 전달된 액션을 받고, 이를 기반으로 애플리케이션의 상태를 변화시킵니다.
- 뷰(View)는 리액트 컴포넌트입니다. 사용자가 뷰에 어떠한 조작을 하면 해당 조작에 해당하는 액션을 생성합니다. 스토어에 저장된 액션을 가지고 뷰에 반영하여 보여지는 내용을 변경할 수 있습니다.
Redux
- Flux의 아키텍처 라이브러리 중 하나로서 애플리케이션 상태 관리를 하는 라이브러리입니다.
아키텍처의 라이브러리이므로 angular.js나 vue.js에도 사용이 가능합니다.
- 진실은 하나의 소스로부터
- 애플리케이션의 모든 상태를 거대한 하나의 객체로 관리합니다. 따라서 애플리케이션의 디버깅과 테스트를 쉽게 할 수 있으며, 모든 곳에서 필요한 상태를 참조할 수 있으므로 애플리케이션 구현도 간단해집니다.
- 상태는 읽기 전용이다
- 컴포넌트에서 애플리케이션의 상태를 참조할 수 있지만 변경할 순 없습니다. 액션을 디스패치해야만 애플리케이션의 상태를 변경할 수 있습니다. (액션을 디스패치를 통해 가공하여 스토어에 저장하고 이를 뷰에서 활용하여 상태나 또 다른 액션을 변경시킨다)
데이터의 흐름은 한 방향으로만 흐를 수 있게 하는 것이 핵심입니다.
- 변화는 순수 함수로 이루어져야 한다
- 값을 입력받고 이 값에 따라 상태를 변화하여 출력합니다. 마치 처음 함수를 배울때 느낌으로 생각해주시면 됩니다.
이러한 수행 비서 역할을 하는 것이 리듀서입니다.
리듀서
- 리듀서는 상태를 변화시키기 위한 함수입니다. 액션을 받고 이 액션의 내용에 따라 상태를 변화시킵니다.
function dinner(state = null, action) {
switch(action.type){
case 'START_EATING':
return {
status : 1,
}
case 'FINISH_EATING':
return {
status : 2,
}
}
}
다음 예시를 보면 action의 type을 통해 내용을 정리합니다. 리듀서는 액션을 받고 이 액션의 상태를 가지고
다음과 같이 switch - case 문으로 나누어 status의 값을 변화시키는 역할을 합니다.
npm install -g create-react-app
다음 명령어를 통해 기본 리액트 틀을 먼저 받아봅니다.
이와 관련해서 불러온 내용을 가지고 면밀히 분석해보겠습니다.
- src/App.js
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>Edit <code>src/App.js</code> and save to reload.</p>
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">Learn React </a>
</header>
</div>
);
}
}
export default App;
src 내 App.js는 Component를 상속받아 rendering (view단을 개발해두었습니다.)
render는 view단을 표현하는 곳이기에 안에 html 태그를 사용해도 좋으나, 컴포넌트의 상속을 받기 때문에
일부 속성에 대해서는 이름을 다르게 해야합니다.
HTML의 class 속성을 여기서는 className이라는 이름으로 속성 값을 주어서 작업하게 됩니다.
그리고 react를 사용하다보면 중요한 문법 하나를 알아야 합니다. 바로 JSX입니다.
import React, {Component} from 'react';
const login_form = (
<form>
<div>
<label>이메일 주소</label>
<input type={"email"}/>
</div>
<div>
<label>비밀번호 </label>
<input type={"password"}/>
</div>
<button type={"submit"}>로그인</button>
</form>
)
class login extends Component{
render() {
return (
login_form
)
}
}
export default login;
src 디렉토리에 view 디렉토리를 만든 다음에 다음과 같이 Component를 상속받는 class 하나를 만들어 폼을 설정해보았습니다.
이렇게 한 뒤 index.js에서 import해서 호출만 해주면 rendering 완료!
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Login from './view/login';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<Login />
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
JSX는 이처럼 랜더링할 내용을 미리 폼 형태로 묶은뒤 호출하는 형식입니다.
JSX 태그는 트랜스파일 후에 일반적인 자바스크립트 객체가 되기 떄문에 변수를 넣거나 함수의 매개변수로 전달할 수 있고 조건문 및 반복문 또한 사용이 가능합니다.
// for문 안에서 JSX 사용
function Names(names) {
const list = [];
for(let i = 0; i< names.length; i++){
list.push(<li>{names[i]} </li>);
}
return <ul>{list}</li>;
}
이처럼 값을 자유롭게 html 태그 형태로 묶어서 넣거나 선언을 할 때에도 JSX 문법을 지켜서 처리가 됩니다.
표현식 지정으로는 다음처럼 진행하면 됩니다. 속성 또한 변수로 설정하여 값을 넣을 수 있습니다.
const inputValue = '~~~~';
const element = <input type={"text"} value={inputValue} />;
이처럼 속성값 또한 상수 또는 변수로 설정하여 넣을 수 있고, 상수 또는 변수로 선언할 수 있습니다. (JSX특징)
그리고 속성 이름은 캐멀 케이스로 작성하는 것이 원칙입니다.
'React.js' 카테고리의 다른 글
| create-react-app (0) | 2018.03.06 |
|---|---|
| Redux 소개 (0) | 2018.03.04 |
| FLUX 소개 (0) | 2018.03.01 |
| keyEvent / ref / LifeCycle (0) | 2018.02.23 |
| 주소록 추가 파트 * Immutability helper 심화 * (0) | 2018.02.16 |
