| import React, {Component} from 'react'; | |
| import ColorBlock from './ColorBlock'; | |
| function getRandomColor() { | |
| return '#' + Math.floor(Math.random()*16777215).toString(16); | |
| } | |
| class App extends Component { | |
| constructor(props) { | |
| super(props); |
| import { List, Map, fromJS } from 'immutable'; | |
| const initialState = Map({ | |
| fruits: fromJS([ // this will turn this array into List of Map | |
| { | |
| "itemName": "banana", | |
| "price": 1.00, | |
| "quantityRemaining": 10 | |
| }, | |
| { |
| import React from 'react'; | |
| export default function asyncComponent(getComponent) { | |
| class AsyncComponent extends React.Component { | |
| static Component = null; | |
| state = { Component: AsyncComponent.Component }; | |
| componentWillMount() { |
| import React from 'react'; | |
| import PageTemplate from 'components/common/PageTemplate'; | |
| import PostContainer from 'containers/post/PostContainer'; | |
| import AskRemoveModalContainer from 'containers/modal/AskRemoveModalContainer'; | |
| import * as postActions from 'store/modules/post'; | |
| const PostPage = ({match}) => { | |
| const { id } = match.params; | |
| return ( |
코드를 작성하다보면, 자주 반복해서 작성하게 되는 코드들이 있습니다. 우리는 주로 그러한 것들을 함수화하여 재사용 하곤 하죠. 컴포넌트 또한 비슷하죠. 같은 UI 관련 코드가 재사용 될 수 있다면 우리는 컴포넌트를 만들어서 컴포넌트를 재사용합니다. 자, 그런데 컴포넌트 기능 상에서도, 자주 반복되는 코드들이 나타날 수 있습니다. 소프트웨어 개발 원리 중에서 DRY 라는 개념이 있죠 - 같은 작업을 반복하지 마라 (Don't repeat yourself)
리액트 컴포넌트를 작성하게 될 때 반복될 수 있는 코드들은, HOC 를 만들어서 해결해줄 수 있습니다. HOC 는, 하나의 함수인데요, 함수를 통하여 컴포넌트에 우리가 준비한 특정 기능을 부여합니다. 직접 만들어볼 때 까지는 감이 잡히지 않을 수도 있습니다. 한번, 직접 만들어봅시다!
이 튜토리얼은 Codsandbox 에서 진행하겠습니다. 프로젝트 열기
react-hot-loader 는 코드가 변경되었을 때 페이지를 새로고침하지 않고 바뀐부분만 빠르게 교체해주는 라이브러리입니다. 비록, 리액트 어플리케이션을 개발 할 때 필수적인 개발도구는 아니지만, 앱의 규모가 커지면 개발서버가 수정될때마다 새로고침이 된다면 딜레이가 발생되어 개발의 흐름이 중간중간 1~6초씩 끊길 수도 있습니다. 특히, styled-components 를 사용하게 되는 경우엔, 스타일이 JS 안에 있어서, 스타일을 수정 할 때마다 새로고침이 된다는게 조금 불편할수도 있겠죠.
이렇게 자바스크립트 코드의 일부분만 교체하는 기능은 웹팩 개발서버의 기능이기 때문에, 라이브러리 없이도 코드를 조금 건들여주면 가능합니다. 하지만, 어플리케이션의 state 를 계속 유지하려면 과정이 복잡하기 때문에 라이브러리의 힘을 빌릴 필요가 있습니다.
이전에는, webpack 쪽에서 설정을 해야 될 것이 있었기 때문에, 무조건 yarn eject 를 해주어야 했지만, 이제는 바벨 설정만 하면 되므로 eject 하는 작업은 선택적입니다. 최신 react-hot-loader 는 굉장히 많이 편해졌답니다.
만약에 MongoDB 를 PC에 설치하는것이 부담스럽다면, mLab 에서 무료로 호스팅을 받을 수 있습니다.
회원가입 / 로그인을 하고 상단의 Create New 버튼을 누르고,
| // @flow | |
| import { createAction, handleActions, type ActionType } from 'redux-actions'; | |
| import produce from 'immer'; | |
| /* ACTION TYPE */ | |
| const INCREASE = 'counter/INCREASE'; | |
| /* ACTION CREATOR */ | |
| const increase = createAction(INCREASE, (value: number) => value); |
리액트 프로젝트를 VSCode 와 Chrome 을 통하여 손쉽게 디버깅 하는 방법을 알아보겠습니다.
Debugger For Chrome VSCode 익스텐션을 설치하세요.
그 다음에는, 프로젝트의 루트경로에 .vscode/launch.json 파일을 만드세요.
| { | |
| "Create Stateless component": { | |
| "prefix": "rsc", | |
| "body": [ | |
| "import * as React from 'react';", | |
| "", | |
| "interface ${1:${TM_FILENAME_BASE}}Props {", | |
| " someProps: boolean;", | |
| "}", | |
| "", |
