본문 바로가기

React

(15)
React vs Vue 잘 정리되어 있는 기사가 있어 가져왔습니다https://joshua1988.github.io/web_dev/vue-or-react/
Redux 시작하기 기초 - (마지막) React와 함께 사용하기 React와 함께 사용하기Redux와 React는 관계가 없다. 그렇다면 왜 같이 사용하는 걸까? Redux는 앞에서 배운 것과 같이 액션을 통해 상태를 변경한다. 이 때문에 UI를 상태에 대한 함수로 기술하는 React와 잘 어울리기 때문이다.할 일 앱을 React로 만들어보자!React Redux 설치하기React 바인딩은 Redux에 기본적으로 포함되어 있지 않다. 명시적으로 설치를 해줘야 한다.npm install --save react-reduxSmart Component(영민한)와 Dumb Component(우직한)영민한 컴포넌트우직한 컴포넌트위치최상위, 라우트 핸들러중간과 말단 컴포넌트Redux와 연관됨예아니오데이터를 읽기 위해Redux 상태를 구독props에서 데이터를 읽음데이터를 바꾸기 ..
Redux 기초 - (2) 스토어(Store), 데이터 흐름 스토어Redux 기초 - (1) 에서 '무엇이 일어날지'에 관한 액션과 '상태를 수정하는' 리듀서를 정의하였다.이번에는 UI도 없이 Redux 기초 - (1) 에서 만들었던 로직들을 테스트해 볼 것이다.이를 가능하게 하는 것이 스토어(Store)다. dispatch(action)를 통해 상태를 수정할 수 있음getState()를 통해 상태에 접근할 수 있음애플리케이션의 상태를 저장함subscribe(listener)를 통해 리스너를 등록함즉, 스토어는 액션과 리듀서를 가져오는 객체다.Redux 애플리케이션은 단 하나의 스토어만을 가질 수 있다. 만약 데이터를 다루는 로직을 쪼개고 싶다면, 전 장에서 배운 리듀서 조합을 사용하면 된다.우린 이전 장에서 combineReducers()를 통해 여러 리듀서를 ..
Redux 기초 - (1)액션, 리듀서 액션데이터를 변경하려면 어떤 행동을 해야하는지에 대한 정의가 필요하다. 새 할 일의 추가를 나타내는 액션의 예시이다. 액션은 평범한 자바스크립트 객체다. const ADD_TODO = 'ADD_TODO'{ type: ADD_TODO, text: 'Build my first Redux app' }type - 어떤 형태의 액션이 실행될지 나타내는 속성. 앱이 충분히 커지게 되면 타입들을 별도의 파일로 분리type 외에 액션 객체의 구조는 마음대로 짜면 된다. ( 물론 권장사항이 있다. - https://github.com/acdlite/flux-standard-action )import { ADD_TODO, REMOVE_TODO } from '../actionTypes'액션 생산자액션을 만드는 함수다.fun..
#4. React 성능과 렌더링 Avoid Reconciliation 앞서 설명한 대로 React는 Reconciliation에서 O(n)의 시간복잡도를 가지고 있으며, 필요 이상의 DOM 접근이나 업데이트를 피하기 때문에 성능에 대한 고민을 할 필요가 없다.하지만 컴포넌트가 렌디링하는 엘리먼트가 수천 수만개라면? O(n)도 느리다. 개발자는 일부 경우에 실제 렌더링이 필요 없는 상황을 알고 있다. 그래서 컴포넌트가 렌더링 전에 호출하는 라이플사이클 메서드 shouldComponentUpdate() 를 오버라이드하여 성능을 향상시킬 수 있다. 기본 구현을 return true이기 때문에, 항상 Reconciliation을 포함한 렌더링 작업을 수행한다. 개발자는 컴포넌트 렌더링이 필요 없는 때에만 return false를 통해 Reac..
#3. Reducer React-Router란? mapStateToProps : 컴포넌트의 props에 매핑시켜준다. ( isLoggedIn에 값을 넣어 줌 )Apache와 같은 웹서버에서는 url에 맞는 파일을 제공하여 여러 페이지를 구현하는 것과 달리, 어떤 경로로 들어오든 간에 똑같은 html파일과 자바스크립트 파일을 제공한다. 여기서 제공되는 js파일 안에는 모든 컴포넌트들이 담겨있고 url에 따라 지정된 컴포넌트들을 랜더링 해준다. 즉, 페이지를 한번 로드한 Smart Component(똑똑한)와 Dumb Component(멍청한) Smart Component Dumb Component 위치 최상위, 라우트 핸들러 중간과 말단 컴포넌트 Redux와 연관됨 Yes No 데이터를 읽기 위해 Redux 상태를 구독(?) ..
#2. React-Router React-Router란? Apache와 같은 웹서버에서는 url에 맞는 파일을 제공하여 여러 페이지를 구현하는 것과 달리, 어떤 경로로 들어오든 간에 똑같은 html파일과 자바스크립트 파일을 제공한다. 여기서 제공되는 js파일 안에는 모든 컴포넌트들이 담겨있고 url에 따라 지정된 컴포넌트들을 랜더링 해준다. 즉, 페이지를 한번 로드한 이후 다른 페이지로 이동 시, 페이지를 처음부터 로딩하지 않고 js 파일을 이용하여 기존 컴파운드를 언마운트시키고 다른 컴포넌트를 마운트한다. 예를 들어 웹의 헤더 컴포넌트와 같은 것을 처음부터 렌더링하지 않고 그대로 유지할 수 있다는 소리.React-Router v3 vs v4? 예제 프로젝트는 v3이여서 구현할 때 v4로 바꿔줘야 했다. IndexRoute : Rou..
#1. 서버 구성 - 라우팅 프로젝트 구조 server측 코드가 있는 폴더 ( /server )가 있다. 해당 프로젝트를 만들 때 React 공부가 목적이였기 때문에 javascript를 같이 사용할 수 있는 node.js를 이용하였다. server측 언어는 php, ruby, python, node.js 등 다양한 종류가 있지만 각자 편한 걸 고른다고 하면 된다. node.js는 브라우저 밖에서도 javascript를 실행 시켜주는 runtime일 뿐이다. ( atom이 node.js로 만들어졌다네.... )Express Web framework일 뿐이다. 웹서버 구축할 때 필요한 것들을 도와주는 역할이다.라우팅 [ server/main.js - 라우팅 설정하는 부분 ][ src/actions/authentication.js - ..
Tip code template 생성 1) File > Snippets > 아래 내용 복사'.source.js': 'React Component': 'prefix': 'rc' 'body': ''' import React, { Component, PropTypes } from 'react'; const propTypes = { }; const defaultProps = { }; class ${1:MyComponent} extends Component { constructor(props) { super(props); } render() { return(
${1:MyComponent}
); } } ${1:MyComponent}.propTypes = propTypes; ${1:MyComponent}..
#3. Redux Flux문제점 사용자와 상호작용은 뷰와 이루어지기 때문에 가끔 뷰가 모델을 업데이트해야 되는 경우가 있다. App이 작은 경우는 문제가 발생하지 않지만, Model간의 dependency를 물고 있는 경우, 변경이 비동기적으로 일어나는 경우를 생각하면 예측하지 못한 에러가 발생할 수 있다.이것은 데이터 흐름을 디버그하기도 어렵게 만든다. 실제로 페이스북에서 읽지않은 메세지가 1이라 떠있었는데 확인해보면 읽은 메시지였던 경우가 있었다.해결책 : 단방향 데이터 흐름