React.js Functional Component
React.js Functional Component (함수형 컴포넌트)React 에서 컴포넌트를 정의 할 때는 보통 EcmaScipt 6 에 도입된 class 문법을 사용한다. 컴포넌트에서 라이프사이클 API 를 사용해야 하거나, state 를 사용하는 경우에는 꼭 이렇게 정의를 해야 했었다. 1234567891011import React, {
태그: react
React.js Router v3
React.js Router v3 사용하기아직 React-Router v3 는 유지보수가 이뤄지고 있는 상태이며, 현재 2017년 3월 기준 가장 최신 버전은 v4 이다. (한동안 베타였는데 정식 릴리즈되었다. 관련 동영상이 만들어졌으니 여기를 참조) 리액트 프로젝트에서 여러 페이지가 있을 땐, 라우터를 사용한다. 라우터는 사용자가 요청한 URL에 따라서
React.js Router [Outdated]
React.js Router: URL 에 따라서 다른 결과물을 보여주기이 포스트는 Outdated 되었으니, React-router v3 를 더 자세히 다루는 리액트 프로젝트에서의 라우터, React-router v3 사용하기 를 참고하도록 하자. 이번 포스트는 React.js 의 Router 사용에 대한 내용으로 Router 는 사용자가 요청한 URL 의
React.js ref
React.js ref: DOMref는 reference 를 의미하며, 이는 DOM 요소에 이름을 달아준다.HTML 의 id와 사뭇 비슷하지만, id는 일반 DOM 요소에 특정 DOM 메소드만 사용 할 수 있지만, ref는 DOM 요소에도 사용하고 컴포넌트에도 사용 할 수 있으며, 해당 컴포넌트가 가지고있는 메소드 및 변수들을 사용 할 수 있다는 점이 큰
React.js Component LifeCycle API
React.js Component LifeCycle API이번에는 React.js 컴포넌트의 LifeCycle API 에 관하여 살펴보겠다.LifeCycle API는, 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어 상태를 업데이트하기 전 후로 실행되는 메소드들 이다.이 메소드를 왜 쓰는것인가? 과연 쓸일이 있을까? 라고 생각할 수 있는데, 가
React.js Immutability Helper
React.js Immutability Helper – State 내부 Array 에 원소 삽입/제거/수정컴포넌트에서 사용할 데이터 배열을 매핑하여 효율적으로 렌더링하는 방법에 이어 이번엔 데이터 배열에 변화를 주는 방법을 알아보도록 하겠다. 이 과정은 생각보다 쉽지만은 않다. 1. state 안의 array 에 원소 삽입/제거&
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 (어떠한 연산도 정의되지 않은 결과를 내놓지 않는것, 즉 예측 불가능한 결과를 나