이 문서는 더 이상 업데이트 하지 않을 생각이다. 대신 https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate 여기에서 계속 해서 만들어 가고 있다.

## 사용한 오픈소스

### React

자세한 설명은 생략 한다

### Nextjs

[NextJs](https://nextjs.org/) 리액트에서 서버사이드 렌더링을 할 수 있도록 해주는 프레임워크다. angular나 react 등은 SPA라서 불편한 점이 더러 있는데, React에서 NextJS를 활용하면 react를 ssr(server side rendering)이 되도록 바꿔줄 수 있다. 그리고 자동으로 code splitting이 되고, 파일 시스템을 기준으로 라우팅이 되며, .. 뭐 이런저런 장점이 있다.

### koa

express를 만든 개발자들이 따로 떨어져 나와서 만든 web framework가 바로 koa다. express와 비교했을 때는 koa가 비교적 가볍고, node.js v7의 async/await 를 자유자재로 쓸 수 있다는 데 있다. 그리고 es6를 도입해서 `generator`도 사용할 수 있다. IBM이 express를 인수해버린 관계로, 많은 개발자들이? koa로 넘어가는 추세라고 하는데, 아직은 잘 모르겠다.

### Styled Component

[Styled Component](https://www.styled-components.com/)

## 시작

### package.json

```json
{
 "name": "hello-world",
 "version": "0.0.1",
 "description": "hello-world",
 "main": "main.js",
 "scripts": {
 "build": "tsc --outDir dist server/index.ts && next build",
 "start": "NODE_ENV=production node dist",
 "dev": "concurrently 'tsc -w --outDir dist server/index.ts' 'npm run watch-server -- --delay 2'",
 "watch-server": "nodemon --exec 'node dist' --watch dist -e '*'"
 },
 "author": "",
 "license": "UNLICENSED",
 "dependencies": {
 "@zeit/next-typescript": "^1.1.1",
 "@zeit/next-css": "^1.0.1",
 "@zeit/next-stylus": "^1.0.1",
 "formik": "^1.5.7",
 "isomorphic-fetch": "^2.2.1",
 "koa": "^2.7.0",
 "koa-body": "^4.1.0",
 "koa-bodyparser": "^4.2.1",
 "koa-morgan": "^1.0.1",
 "koa-mount": "^4.0.0",
 "koa-proxies": "^0.8.1",
 "koa-router": "^7.4.0",
 "next": "^8.1.0",
 "react": "^16.8.6",
 "react-dom": "^16.8.6",
 "styled-components": "^3.4.10"
 },
 "devDependencies": {
 "@types/isomorphic-fetch": "0.0.35",
 "@types/koa": "^2.0.48",
 "@types/koa-bodyparser": "^4.3.0",
 "@types/koa-morgan": "^1.0.4",
 "@types/koa-mount": "^3.0.1",
 "@types/koa-router": "^7.0.40",
 "@types/next": "^8.0.5",
 "@types/node": "^12.0.4",
 "@types/react": "^16.8.22",
 "babel-eslint": "^10.0.1",
 "babel-plugin-styled-components": "^1.10.0",
 "concurrently": "^4.1.0",
 "nodemon": "^1.19.1",
 "npm": "^6.9.0",
 "typescript": "^3.5.1"
 }
}
```

### ./typings/koa-proxies/index.d.ts

애석하게도 `koa-proxies`의 typing이 존재하지 않는다. `./typings/koa-proxies`에 아래와 같이 추가하자.

```typescript
declare module "koa-proxies" {
 import { Middleware } from "koa"
 namespace koaProxies {}
 function koaProxies(name: string, options?: any): Middleware
 export = koaProxies
}
```

타입스크립트로 `nextjs`를 사용하기 위하여 `@zeit/next-typescript`를 사용하였다.

### ./next.config.js

별도의 설정은 넣지 않았다.

```javascript
const withCSS = require("@zeit/next-css")
const withStylus = require("@zeit/next-stylus")
const withTypescript = require("@zeit/next-typescript")

module.exports = withTypescript(
 withStylus(
 withCSS({
 webpack: config => ({
 ...config,
 plugins: [...(config.plugins || [])],
 node: {
 fs: "empty",
 },
 }),
 })
 )
)
```

### ./.babelrc

```json
{
 "presets": ["next/babel", "@zeit/next-typescript/babel"]
}
```

### ./pages/index.tsx

nextjs의 유일한 제약은 pages 폴더다. pages에 렌더링 할 페이지를 만들어 둬야 한다.

```typescript
import * as React from "react"
import styled from "styled-components"

const MainHeading = styled.div`
 font-size: 50px;
 color: red;
`

export default class IndexPage extends React.PureComponent {
 render() {
 return <MainHeading>hello?</MainHeading>
 }
}
```

### ./server/index.ts

가장 중요한 서버 부분이다. koa를 사용한 이유는 `*/api/*`로 요청이 오는 호출에 대해서는 외부에 있을지도 모르는 api서버를 활용하기 위함이다. 이를 별도로 처리 하지 않는다면 CORS이슈가 있을수 있기 때문이다. 그래서 `koa`를 통해서 `nextjs`를 호출하는 방식으로 바꾸었다.

```typescript
import * as next from "next"
import * as Koa from "koa"
import * as morgan from "koa-morgan"
import * as Router from "koa-router"
import * as proxy from "koa-proxies"
import * as bodyparser from "koa-bodyparser"
import * as mount from "koa-mount"

const isDev = process.env.NODE_ENV !== "production"

function renderNext(nextApp: next.Server, route: string) {
 return (ctx: Koa.Context) => {
 ctx.res.statusCode = 200
 ctx.respond = false

 nextApp.render(ctx.req, ctx.res, route, {
 ...((ctx.request && ctx.request.body) || {}),
 ...ctx.params,
 ...ctx.query,
 })
 }
}

async function main() {
 const nextApp = next({ isDev })
 const app = new Koa()
 const router = new Router()

 await nextApp.prepare()
 const handle = nextApp.getRequestHandler()

 router.get("/", renderNext(nextApp, "/index"))

 app
 .use(morgan("combined"))
 .use(bodyparser())
 .use(
 proxy("/api", {
 target: "https://jayg-api-request.test.com",
 rewrite: (path: string) => path.replace(/^\/api/, ""),
 changeOrigin: true,
 })
 )
 .use(
 mount("/health", (ctx: Koa.Context) => {
 handle(ctx.req, ctx.res)
 ctx.status = 200
 })
 )
 .use(router.routes())
 .use(
 mount("/", (ctx: Koa.Context) => {
 handle(ctx.req, ctx.res)
 ctx.respond = false
 })
 )
 .listen(3000)
}

main()
```

이 문서는 더 이상 업데이트 하지 않을 생각이다. 대신 https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate 여기에서 계속 해서 만들어 가고 있다. ## 사용한 오픈소스  ### React  자세한 설명은 생략 한다  ### Nextjs  [NextJs](https://nextjs.org...

Typescript, React, NextJs, Koa, Styled Component 로 프론트엔드 환경 만들기

## 고민지점

- Global 로 관리하는 Colorset Red, Blue, Green, Black이 있다.
- 이 색들은 각각 지정된 칼라코드가 있다
- 그러나 때로는 그 컬러코드에 맞게 안쓰는 경우도 있다
- 그러나 때로는 저 네개를 다 안쓰고 1~3개만 쓰는 경우가 있다.

## Union types

[Union Type](https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types)

어떤 라이브러리에서 받는 파라미터의 값을 number와 string으로 제한한다고 하자. 그렇다면 코드는 아래와 같을 것이다.

```typescript
function numberOrString(parameter: any) {
 if (typeof parameter === "number") {
 return console.log("this is number")
 } 
 if (typeof parameter === "string") {
 return console.log("this is string")
 } 

 throw new Error(`Expecting number of string, but got ${typeof parameter}`)
}
```

물론 이런식으로 처리할수도 있다. 그러나 문제는 컴파일 상에서만 괜찮다는 것이다. any는 typescript에서 어떤 값이든 들어갈 수 있으므로, 이 에러는 런타임상에서만 발생하게 된다.

일반적인 객체지향 코드에서는, 두 타입으로 하나 hierarchy 를 만들어서 처리할 수도 있지만, 약간 그건 과한 느낌이 있기도 하다. 이 코드를 이렇게 처리할 수도 있다.

```typescript
function numberOrString(parameter: string|number) {
 // do something...
}
```

이런 방식을 `Union Type` 이라고 한다. `Union Type`는 하나의 값에 여러가지 타입을 표현할 수 있게 해준다. 사용할 값을 `|`로 구별해서 넣어주면 된다.

처음 문제로 돌아와서, Global한 컬러로 지정하려는 값이 네개 있다고 했다. 이제 이것은 이렇게 처리하면 된다.

```typescript
export type GlobalColors = 'Red' | 'Blue' | 'Green' | 'Black'
```

자 그럼 이것이 어떻게 동작하는지 보자.

```typescript
function getColor(parameter: GlobalColors) {
 console.log(parameter)
}
```

`getColor()`에 `GlobalColors`가 아닌 다른 값을 넣으면 

![ts1](../images/ts1.png)

vscode에서 (물론 plugin덕분이지만) 네개의 값만 강제하는 것을 볼 수 있다. 만약 다른 값을 넣는다면 컴파일상에서 에러가 난다.

![ts2](../images/ts2.png)

한 가지 신기 (당연) 한점은, 이 코드는 자바스크립트로 컴파일 되지 않는다는 것이다. 이점은 `enum`이랑 다른데, 암튼 지간에 저건 자바스크립트에서 처리할 수 없는 일이다. 이러한 타입체크는 나중에 컴파일 하게 된다면, `*.d.ts`에서 처리해준다는 것이다.


## enum

`enum`은 열거형이다. 그렇다.

```typescript
enum GlobalColorSet {
 Red,
 Blue,
 Green,
 Black
}
```

를 컴파일하면

```javascript
var GlobalColorSet;
(function (GlobalColorSet) {
 GlobalColorSet[GlobalColorSet["Red"] = 0] = "Red";
 GlobalColorSet[GlobalColorSet["Blue"] = 1] = "Blue";
 GlobalColorSet[GlobalColorSet["Green"] = 2] = "Green";
 GlobalColorSet[GlobalColorSet["Black"] = 3] = "Black";
})(GlobalColorSet || (GlobalColorSet = {}));
```
로 나온다. 복잡한데, 결과적으로는 아래와 같다.

```javascript
var GlobalColorSet = {0: "Red", 1: "Blue", 2: "Green", 3: "Black", Red: 0, Blue: 1, Green: 2, Black: 3}
```

일반적인 map과 다르게 key로 값을 얻을 수 있고, 값으로도 key를 얻을 수 있다.

그러나 `enum`은 const로 선언될 경우 컴파일 결과가 조금다르다.

```typescript
const enum ConstGlobalColorSet {
 Red,
 Blue,
 Green,
 Black
}
```

다른게 아니고, 사실 아무것도 컴파일 되지 않는다. 이는 읽기 전용으로 생성된 객체이기 때문에 (const) 수정할 객체 자체가 생성되지 않는 것이다. 또한 앞서 보았던 값으로 키를 얻는 행위 또한 불가능해진다. 

아무튼, 글로벌하게 쓸 색상을 enum으로 선언했다.

```typescript
const enum ConstGlobalColorSet {
 Red = '11, 11, 11',
 Blue = '22, 22, 22',
 Green = '33, 33, 33',
 Black = '44, 44, 44',
}
```


## Record

`Record<K, V>`로 쓰인다. 여기서 K는 key이고, V는 Value다. `keyof Record<K, T>`는 `k`로, `Record<K, T>[K]`는 `T`다. (느낌이 그렇다는 것) 밑에 예시를 보자.

이거는 

```typescript
//이거는
type ColorProperties = Record<GlobalColors, string>
//이거와 같다
type ColorProperties = { red: string, blue: string, green: string, black: string }
```

(말보다 코드가 쉽다) 위에 경우와 마찬가지로, js로 컴파일 됐을 때는 위 두 코드는 아무런 js로 변환되지 않는다. 

```typescript
colorProp1['purple'] = 1;
colorProp1['orange']
```

위의 코드는 당연히 타입스크립트 컴파일에서 에러가 난다.

## Partial

Partial은 key를 옵셔널하게 해준다. 

```typescript
// 이거는
let PartialColorProperties = Partial<ColorProperties>
// 이거와 같다.
let PartialColorProperties = { red?: string, blue?: string, green?: string, black?: string }
```

## 정리

```typescript
// 글로벌 색으로 4가지를 선언한다.
export type GlobalColors = 'Red' | 'Blue' | 'Green' | 'Black'

// 기본값으로 색상을 선언한다.
const enum ConstGlobalColorSet {
 Red = '11, 11, 11',
 Blue = '22, 22, 22',
 Green = '33, 33, 33',
 Black = '44, 44, 44',
}

// 기본 색상값외에 다른 색상을 사용하고 싶다면 
const CUSTOM_COLORS: Partial<Record<GlobalColors, string>> = {
 gray: '55, 55, 55',
}
```

## 고민지점 - Global 로 관리하는 Colorset Red, Blue, Green, Black이 있다. - 이 색들은 각각 지정된 칼라코드가 있다 - 그러나 때로는 그 컬러코드에 맞게 안쓰는 경우도 있다 - 그러나 때로는 저 네개를 다 안쓰고 1~3개만 쓰는 경우가 있다.  ## Union types  [Union Type](https://www....

Typescript Type, Enum, Partial, Record로 글로벌 변수 관리하기

### 함수형 컴포넌트

```javascript
import React from 'react';

function Hello(props) {
 return (
 <div>hello {props.name}</div>
 )
}
```

함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등의 기능을 제거한 상태이므로 메모리 사용량이 다른 컴포넌트에 비해 적다. 따라서 성능을 최적화 하기 위해서는 위와 같이 함수형 컴포넌트를 많이 쓰는 것이 좋다.

### 함수형 컴포넌트 ```javascript import React from 'react'; function Hello(props) { return ( <div>hello {props.name}</div> ) } ``` 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등의 기능을 제거한 상태이므로 메모리 사용량이...

React 공부하기 8 - 함수형 컴포넌트

## React Component Life Cycle

라이프 사이클은 총 10가지다. `Will`접두사는 어떤 작업을 작동하기전에 실행하는 메소드가, `Did`는 어떤 작업을 한 후에 실해오디는 메서드다. 이 메서드들은 컴포넌트 클래스에서 덮어써서 선언하여 사용할 수 있다.

라이프사이클은 총 3가지 카테고리로 나눌 수 있는데,  `mount`, `unmount`, `update`다. 

### Mount

DOM이 생성되고, 웹 브라우저 상에 나타나는 것을 mount라고 한다. 이 때 호출되는 메서드는 다음과 같다.

1. 컴포넌트 만들기
2. constructor: 컴포넌트를 새로 만들 때 마다 호출되는 클래스 생성자 메서드
3. `getDerivedStateFormProps`: `props`에 있는 값을 `state`와 동기화 시키는 메서드다.
4. `render`: UI를 렌더링하는 메서드
5. `componentDidMount`: 컴포넌트가 웹 브라우저 상에 나타난 후 호ㅓ출하는 메서드


### update

컴포넌트를 업데이트 하는 경우는 아래 4가지다.

1. props가 바뀔때
2. state가 바뀔때
3. 부모컴포넌트가 리렌더링 될때
4. `this.forceUpdate`를 통하여 강제로 렌더링을 트리거할 때

호출되는 메서드들은 아래와 같다.

1. `props`변경 / 부모 컴포넌트가 리렌더링
2. `getDerivedStateFromProps`: `props`에 있는 값을 `state`와 동기화 시키는 메서드다.
3. `state`가 변경
4. `shouldComponentUpdate`: 컴포넌트가 리렌더링 해야하는지 결정하는 메서드다. 여기에서 `false`가 리턴되면 아래 메서드들을 더이상 호출 하지 않는다.
5. `forceUpdate` 호출
6. `render`
7. `getSnapshotBeforeUpdate`: `Component` 변화를 DOM에 반영하기 전에 호출하는 메서드
8. 웹브라우저의 `dom`이 변화
9. `componentDidUpdate`: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드


### Unmount

컴포넌트를 DOM에서 제거하는 것을 말한다.

1. 언마운트
2. `componentWillUnmount`: 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출되는 메서드다.


### render() { ... }

컴포넌트의 모양새를 정의한다. 라이프사이클 메서드중 유일하게 필수 메서드이기도 하다. 여기에서 `this.props` `this.state`에 접근할 수 있으며, 리액트 요소를 반환한다. 다만 이 안에서는 절대 state를 변경해서는 안되며, 웹브라우저에 접근해서도 안된다.


### constructor

컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 최초로 실행된다. 여기에서 초기 state를 정할 수 있다.

### getDerivedStateFromProps

v16.3 이후에 등장한 메서드로, `props`로 받아온 값을 `state`에 동기화 시키는 용도로 사용되며, 컴포넌트를 마운트하거나 `props`를 변경할 때 호출된다.

### componentDidMount 

컴포넌트를 만들고, 첫 렌더링을 마친 후 실행된다. 이 안에서 다른 자바스크립트 라이브러리나 프레임워크 함수를 호출하거나, 이벤트 등록, `setTimeOut`, `setInterval` 네트워크요청과 같은 비동기 요청을 실행하면 된다.

### shouldComponentUpdate

`props`나 `state`를 변경했을 때, 리렌더링을 시작할지 여부를 결정하는 메서드다. 여기에서는 반드시 `true`, `false`를 반환해야 한다. `false`를 반환하면 이 후의 과정이 모두 멈춘다.

이 안에서 `this.props` `this.states`로 접근할 수 있고, 다음 값을 `this.nextProps` `this.nextState`로 다음 값을 접근할 수 있다. 성능을 최적화 하거나, 알고리즘을 작성하여 리렌더링을 방지하기 위해서 사용하기도 한다.

### getSnapshotBerforeUpdate

v16.3 이후에 등장한 메서드로, `render`를 호출한 후 `DOM`에 변화를 반영하기 바로 직전에 호출하는 메서드다. 여기에서 반환하는 값을 `componentDidUpdate`에서 세번째 파라미터인 `snapshot`으로 값을 전달 받을 수 있다. 주로 스크롤바의 위치와 같이 업데이트하기 직전에 값을 참고할 일이 있을 때 활용한다.

```javascript
getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevState.array !== this.state.array) {
        const {scrollTop, scrollHeight} = this.list
        return {scrollTop, scrollHeight};
    }
}
```

### componentDidUpdate 

리렌더링을 완료한 후에 실행한다. 업데이트가 끝난 이후이므로, DOM관련 처리를 해도된다. 여기에서 `prevProps` `prevState`를 활용하여 이전의 값에 접근할 수 도 있다. `getSnapshotBerforeUpdate`에서 반환한 값이 있다면 여기서 `snapshot`값을 전달 받을 수 있다.

### componentWillUnmount

컴포넌트를 DOM에서 제거할 때 실행한다. `componentDidMount`에서 등록한 이벤트, 타이머, DOM이 있다면 어기에서 제거해야 한다. 


![component-life-cycle](https://cdn-images-1.medium.com/max/2400/1*cEWErpe-oY-_S1dOaT1NtA.jpeg)

출처: [https://code.likeagirl.io/understanding-react-component-life-cycle-49bf4b8674de](https://code.likeagirl.io/understanding-react-component-life-cycle-49bf4b8674de)

## React Component Life Cycle 라이프 사이클은 총 10가지다. `Will`접두사는 어떤 작업을 작동하기전에 실행하는 메소드가, `Did`는 어떤 작업을 한 후에 실해오디는 메서드다. 이 메서드들은 컴포넌트 클래스에서 덮어써서 선언하여 사용할 수 있다.  라이프사이클은 총 3가지 카테고리로 나눌 수 있는데,  `mount`, `unm...

React 공부하기 7 - 컴포넌트 라이프 사이클

## 컴포넌트 반복해서 쓰기

```javascript
import React, {Component} from 'react';

class IterationSample extends Component {
 render () {
 const names = ['눈사람', '얼음', '눈', '바람']
 const nameList = names.map(
 (name) => (<li>{name}</li>)
 );

 return (
 <ul>
 {nameList}
 </ul>
 )
 }
}

export default IterationSample;
```

```javascript
class App extends Component {
 render () {
 return (
 <IterationSample/>
 )
 }
}
```

특별한 거는 없지만, 콘솔에서 `key`가 없다는 에러가 발생한다. 가상 DOM을 비교한느 과정에서, Key값을 활용하여 변화가 일어나는지 확인하기 때문에, key값을 지정해줘야한다.

```javascript
class IterationSample extends Component {
 render () {
 const names = ['눈사람', '얼음', '눈', '바람']
 const nameList = names.map(
 (name, index) => (<li key={index}>{name}</li>)
 );

 return (
 <ul>
 {nameList}
 </ul>
 )
 }
}
```

이제 에러가 나지 않는다. 

보통은 이렇게 정적인 데이터를 쓰기보다는, 동적인 데이터를 더 렌더링할 기회가 더 많을 것이다.

```javascript
import React, {Component} from 'react';

class IterationSample extends Component {
 state = {
 names: ['토니안', '강타', '문희준', '이재원', '장우혁'],
 name: ''
 }

 handleChange = (e) => {
 this.setState({
 name: e.target.value
 })
 }

 handleInsert = (e) => {
 this.setState({
 names: this.state.names.concat(this.state.name),
 name: ''
 })
 }

 handleRemove = (index) => {
 // this.state의 레퍼런스
 const {names} = this.state;
 this.setState({
 names: names.filter((item, idx) => {return idx !== index})
 })
 }

 render() {
 const nameList = this.state.names.map(
 (name, index) => (<li onDoubleClick={() => this.handleRemove(index)} key={index}>{name}</li>)
 );

 return (
 <div>
 <input 
 onChange={this.handleChange}
 value={this.state.name}/>

 <button onClick={this.handleInsert}>추가</button>
 <ul>
 {nameList}
 </ul>
 </div>
 )
 }
}

export default IterationSample;
```

## 컴포넌트 반복해서 쓰기 ```javascript import React, {Component} from 'react';  class IterationSample extends Component {     render () {         const names = ['눈사람', '얼음', '눈', '바람']         const nameList ...

React 공부하기 6 - 컴포넌트 반복

<h2 id="컴포넌트-반복해서-쓰기">컴포넌트 반복해서 쓰기</h2>
<pre class="language-javascript"><code class="language-javascript">import React, {Component} from 'react';

class IterationSample extends Component {
 render () {
 const names = ['눈사람', '얼음', '눈', '바람']
 const nameList = names.map(
 (name) => (&#x3C;li>{name}&#x3C;/li>)
 );

 return (
 &#x3C;ul>
 {nameList}
 &#x3C;/ul>
 )
 }
}

export default IterationSample;
</code></pre>
<pre class="language-javascript"><code class="language-javascript">class App extends Component {
 render () {
 return (
 &#x3C;IterationSample/>
 )
 }
}
</code></pre>
특별한 거는 없지만, 콘솔에서 <code>key</code>가 없다는 에러가 발생한다. 가상 DOM을 비교한느 과정에서, Key값을 활용하여 변화가 일어나는지 확인하기 때문에, key값을 지정해줘야한다.
<pre class="language-javascript"><code class="language-javascript">class IterationSample extends Component {
 render () {
 const names = ['눈사람', '얼음', '눈', '바람']
 const nameList = names.map(
 (name, index) => (&#x3C;li key={index}>{name}&#x3C;/li>)
 );

 return (
 &#x3C;ul>
 {nameList}
 &#x3C;/ul>
 )
 }
}
</code></pre>
이제 에러가 나지 않는다.
보통은 이렇게 정적인 데이터를 쓰기보다는, 동적인 데이터를 더 렌더링할 기회가 더 많을 것이다.
<pre class="language-javascript"><code class="language-javascript">import React, {Component} from 'react';

class IterationSample extends Component {
 state = {
 names: ['토니안', '강타', '문희준', '이재원', '장우혁'],
 name: ''
 }

 handleChange = (e) => {
 this.setState({
 name: e.target.value
 })
 }

 handleInsert = (e) => {
 this.setState({
 names: this.state.names.concat(this.state.name),
 name: ''
 })
 }

 handleRemove = (index) => {
 // this.state의 레퍼런스
 const {names} = this.state;
 this.setState({
 names: names.filter((item, idx) => {return idx !== index})
 })
 }

 render() {
 const nameList = this.state.names.map(
 (name, index) => (&#x3C;li onDoubleClick={() => this.handleRemove(index)} key={index}>{name}&#x3C;/li>)
 );

 return (
 &#x3C;div>
 &#x3C;input 
 onChange={this.handleChange}
 value={this.state.name}/>

 &#x3C;button onClick={this.handleInsert}>추가&#x3C;/button>
 &#x3C;ul>
 {nameList}
 &#x3C;/ul>
 &#x3C;/div>
 )
 }
}

export default IterationSample;
</code></pre>