05. Loop

Component List 를 출력합니다.

들어가기전

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

Array 를 반복하며 그리는데 일반적으로 map 을 가장 많이 이용합니다.

실습

프로젝트는 초기 세팅 상태로 진행되어집니다. +@ 로 이제는 styled-component 를 이용하기 때문에 App.css 파일이 필요없습니다.

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

// 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 를 이용합니다.

// 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 을 돌면서 그려주면됩니다.

// 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 과 Arrow Function 에 대한 학습이 필요합니다. Arrow Function 에서 {} 가 생각된다면 return 을 하겠다는 의미와 같습니다.

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