아카이브: 2017/7

React.js Component Map

React.js Component Iteration (반복) – MapReact.js 에서 다른 데이터를 지니고있는 같은 종류의 여러 컴포넌트를 효율적으로 렌더링 하는 방법에 대하여 알아보도록 하겠다. 1. JavaScript – Array.prototype.map우선, JavaScript 의 Array 객체 내장함수인 map 함수에 대하여 알아보자. 정의

React.js Component State Props

React.js Component의 State 와 Props 사용하기React.js 의 Component 에서 사용 할 데이터를 다루는 State 와 Props 에 대하여 알아보도록 하겠다. 1. 시작하기Component 생성 및 모듈화 에서 사용하던 프로젝트를 계속해서 이어서 작성한다. index.html 1234567891011<!DOCTYPE h

React.js Component Module

React.js Component 생성 및 모듈화React.js 에서 사용되는 Component 를 생성하고, 이를 모듈화 하는 방법을 알아보도록 하겠다. Component 생성 및 모듈화다음 index.js 파일은, 이전 포스트에서 만든걸 이어서 진행한다. src/index.js 123456import React from 'react&#

React.js JSX Syntax

React.js JSX 문법React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 템플릿화 한다. JSX를 사용하는것이 필수는 아니지만 이를 사용하면 다음과 같은 장점이 있다. JSX는 컴파일링 되면서 최적화 되므로, 빠르다 Type-safe (어떠한 연산도 정의되지 않은 결과를 내놓지 않는것, 즉 예측 불가능한 결과를 나

React.js Setting

React.js 작업환경 설정하기React 작업환경을 설정에 대해 알아보자. NodeJS 환경에서 React를 사용 할 것이므로 NodeJS 및 npm이 설치되있어야 한다. NodeJS 환경에서 React를 사용하는 방법은 대표적으로 webpack을 이용하는 방법이 있고, browserify를 이용하는 방법이 있는데, 이 포스트에서는 webpack을 이용하