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

컴포넌트 반복해서 쓰기

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

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

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

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

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

이제 에러가 나지 않는다.

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

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