React (21) 썸네일형 리스트형 #4. React 성능과 렌더링 Avoid Reconciliation 앞서 설명한 대로 React는 Reconciliation에서 O(n)의 시간복잡도를 가지고 있으며, 필요 이상의 DOM 접근이나 업데이트를 피하기 때문에 성능에 대한 고민을 할 필요가 없다. 하지만 컴포넌트가 렌디링하는 엘리먼트가 수천 수만개라면? O(n)도 느리다. 개발자는 일부 경우에 실제 렌더링이 필요 없는 상황을 알고 있다. 그래서 컴포넌트가 렌더링 전에 호출하는 라이플사이클 메서드 shouldComponentUpdate() 를 오버라이드하여 성능을 향상시킬 수 있다. 기본 구현을 return true이기 때문에, 항상 Reconciliation을 포함한 렌더링 작업을 수행한다. 개발자는 컴포넌트 렌더링이 필요 없는 때에만 return false를 통해 Rea.. #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 : Ro.. #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}.defaultPr.. #3. Redux Flux 문제점 사용자와 상호작용은 뷰와 이루어지기 때문에 가끔 뷰가 모델을 업데이트해야 되는 경우가 있다. App이 작은 경우는 문제가 발생하지 않지만, Model간의 dependency를 물고 있는 경우, 변경이 비동기적으로 일어나는 경우를 생각하면 예측하지 못한 에러가 발생할 수 있다. 이것은 데이터 흐름을 디버그하기도 어렵게 만든다. 실제로 페이스북에서 읽지않은 메세지가 1이라 떠있었는데 확인해보면 읽은 메시지였던 경우가 있었다. 해결책 : 단방향 데이터 흐름 TroubleShooting 1. Uncaught Error : Invariant Violation: Element type is invalid: expected a string ( for built-in components) or a class/function but got:object import { Router } from 'react-router' : imports the default export import Router from 'react-router' : imports the export 'Router' from the file 2. Unterminated JSX contents 3. 화면이 보이지 않은 문제 ( this.props.children ) 상황 : this.props.children에 태그가 붙지 않아 화.. #2. ReactJS 시작하기 CODEPEN 설정, ES6 클래스 ES6클래스를 사용하기 위해 Preprocessor는 Bable을 사용한다. Codepen의 다음과 같은 기능을 사용하지 않고 설정을 하려면 node install 한후 그에 맞는 명령어를 옵션에 더해야한다. 이런 것도 IDE에서 제공해주는 편리한 기능인 것 같다. JSX의 특징 XML 같인 생긴 애를 native Javascript로 변경해준다. 이게 어디서 동작하는가? Babel이 JSX Loader를 이용하여 코드를 변환해준다. 질문 : HTML과 Javascript 즉 UI와 behavior를 한 곳에 짜는건 잘못된 거 아닌가요? => 간단한 application에서는 괜찮지만 규모가 큰 application에서는 수만개의 UI와 각각의 behavior가 있는데.. #1. ReactJS 소개 소개 JavaScript 어플리케이션을 어떻게 구조화 할까? AngularJS? Ember? 뭐를 사용해야 되는거지??ReactJS는 프레임워크( 틀을 제공 - 필요기능 대부분 구현되어 있어 틀을 벗어날 수 없음 )가 아닌 UI를 만들기 위한 라이브러리이다.즉, 다른 프레임워크나 라이브러리와 혼용해서 사용할 수 있다. React는 무엇인가 : Virtual DOM과 Reconciliation React는 HTML Element들을 Virtual DOM을 이용해 표현하고 있다. Virtual DOM 은 가상의 HTML Element들을 가지고 있다가, 새로 그릴때 필요한 부분만 업데이트 ( DOM 조작 ) 하는 방식이다. jQuery를 사용하는 경우 밑의 예제처럼 셀렉터를 이용하여 해당 DOM을 찾은 후 .. 2일차 - React로 변경 (4.9.일) AngularJS2에서 React로 변경 AngularJS2로 프로젝트를 시작하려 했으나, 주위 친구들과 네이버 D2글을 읽어보니 근래에는 React의 인기가 가장 좋은것 같아 React로 변경을 하였다. 네이버도 15년 쯤에 메일함 화면 수정을 하면서 React와 Redux로 넘어갔었다. 처음에 UI 작업만 진행하면 될 줄 알았는데 JSP코드와 Javascript 두 군데를 중복으로 수정해야 하며, Javascript에 뷰와 로직이 모두 들어있는 문제를 보고 새로운 프레임워크를 검토하다 React를 선택했다고 한다. ( 메일함 구현이 초기 페이지 렌더링은 서버에서 JSP로 진행하고 이후 동작은 AJAX 통신으로 동작하는 SPA(single page application) 이기 때문에 JSP 파일과 Ja.. 이전 1 2 3 다음
