# 05. Loop

### 들어가기전 

아래와 같이 비슷하게 생긴 Component 들을 하나, 하나 만드는 것이 아니라 \
공통되는 Component 를 만들고 반복을 통하여 그려냅니다.

Array 를 반복하며 그리는데 일반적으로 [map ](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)을 가장 많이 이용합니다.

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-Lnr316nE1KVGMQ_MRef%2F-Lnr4DaJGe-sgMFupZDn%2Fimage.png?alt=media\&token=d4f05a17-923c-43bd-8007-d3f0dbc8adea)

### 실습

> 프로젝트는 [초기 세팅 상태](https://simplereact.gitbook.io/simplereact/02.-componet#undefined-1)로 진행되어집니다. +@ 로 이제는 styled-component 를 이용하기 때문에 App.css 파일이 필요없습니다.

웹툰을 그리기 위한 State 를 준비합니다.

```javascript
// App.js

import React from 'react'

class App extends React.Component {
  state = {
    webtoons: [{
      title: '여신강림',
      src: 'https://shared-comic.pstatic.net/thumb/webtoon/703846/thumbnail/thumbnail_IMAG10_35503130-16ce-4236-b913-0fe76226de36.jpg'
    },
    {
      title: '약한영웅',
      src: 'https://shared-comic.pstatic.net/thumb/webtoon/710751/thumbnail/thumbnail_IMAG10_eed99ea4-5908-4445-b89a-d3881797f909.jpg'
    },
    {
      title: '외모지상주의',
      src: 'https://shared-comic.pstatic.net/thumb/webtoon/641253/thumbnail/title_thumbnail_20141120112141_t83x90.jpg'
    }]
  }

  render () {
    return (
      <div></div>
    )
  }
}

export default App
```

웹툰 Component 를 추가합니다.\
Webtoon Component 는 Props 를 받아 그려주는 역할을 합니다. \
예전에는 이런 경우 Functional Component 를 이용하는것이 일반적이었습니다.\
다른 부가 기능들 state 를 가지고 있다던지, life cycle 같은 것이 필요하다면 Class Component 를 이용하는것이 일반적이었습니다.

하지만 Hook 의 등장으로 이런 사용 경계도 무너졌습니다. 요즘은 다 Functional Component 를 이용합니다.

```javascript
// src/components/webtoon.js

import React from 'react'
import styled from 'styled-components'

const WebtoonContainer = styled.div`
    width: 80px;
    text-align: center;
`

const Image = styled.img`
    width: 100%;
    vertical-align: top;
`

const Title = styled.div`
    display: block;
    overflow: hidden;
    margin-bottom: 1px;
    font-size: 11px;
    color: #434343;
    letter-spacing: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
`

function Webtoon({ title, src }) {
    return (
        <WebtoonContainer>
            <Image src={src}/>
            <Title>{title}</Title>
        </WebtoonContainer>
    )
}

export default Webtoon
```

이제 App.js 에서 만든 Webtoon Component 를 불러와 Loop 을 돌면서 그려주면됩니다.

```javascript
// App.js

import React from 'react'
import Webtoon from './components/webtoon'

class App extends React.Component {
  state = {
    webtoons: [{
      title: '여신강림',
      src: 'https://shared-comic.pstatic.net/thumb/webtoon/703846/thumbnail/thumbnail_IMAG10_35503130-16ce-4236-b913-0fe76226de36.jpg'
    },
    {
      title: '약한영웅',
      src: 'https://shared-comic.pstatic.net/thumb/webtoon/710751/thumbnail/thumbnail_IMAG10_eed99ea4-5908-4445-b89a-d3881797f909.jpg'
    },
    {
      title: '외모지상주의',
      src: 'https://shared-comic.pstatic.net/thumb/webtoon/641253/thumbnail/title_thumbnail_20141120112141_t83x90.jpg'
    }]
  }

  render () {
    const { webtoons } = this.state 
    
    return (
      <div>
        {webtoons.map(({ src, title }) => (<Webtoon src={src} title={title} />))}
      </div>
    )
  }
}

export default App
```

아래의 문법이 익숙하지 않다면 [Destructuring ](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) 과 [Arrow Function ](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98)에 대한 학습이 필요합니다. Arrow Function 에서 {} 가 생각된다면 return 을 하겠다는 의미와 같습니다.

```javascript
webtoons.map(({ src, title }) => (<Webtoon src={src} title={title} />))}
```

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-Lnr316nE1KVGMQ_MRef%2F-Lnr8eZ35E3vPDAeOg9i%2Fimage.png?alt=media\&token=d8382363-c011-4677-bb28-74513b8a56a7)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://simplereact.gitbook.io/simplereact/05.-loop.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.