01.8 리액트 컴포넌트 반복

- 1월 31, 2019

React.js

01.8. 컴포넌트 반복

01.8.1. 자바스크립트 배열의 map() 함수

자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 프로세싱한 후 그 결과로 새로운 배열을 생성한다.

arr.map(callback(currentValue[, index[, array]])[, thisArg])

파라미터 설명

callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.
- currentValue : 처리할 현재 요소.
- index (Optional) : 처리할 현재 요소의 인덱스.
- array (Optional) : map()을 호출한 배열.
thisArg (Optional) : callback을 실행할 때 this로 사용되는 값.

map 함수는 기존 배열로 새로운 배열을 만드는 역할을 한다.

ES6 문법의 map

const nums = [1,2,3,4,5];
const result = nums.map(num => num * num);
console.log(result); // [1, 4, 9, 16, 25]

01.8.2. 데이터 배열을 컴포넌트 배열로 map

import React , { Component } from 'react';

class NewComponent extends Component {
    render() {
        const arr = [1,2,3,4,5];
        const arrList = arr.map(
            (arr) => (<li>{arr}</li>)
        );

        return (
            <ul>{arrList}</ul>
        );
    }
}

export default NewComponent;

import React, { Component } from 'react';
import NewComponent from './NewComponent';

class App extends Component {
    render() {
        return (
            <div>
                <NewComponent ref={ (ref) => this.newComponent=ref }/>
            </div>
        );
    }
}

export default App;

크롬 개발자도구의 콘솔을 보면 "key" prop가 없다라는 경고가 표시된다.

01.8.3. key

리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 아이템에 변동되 있었는지 인식하는데 도움을 준다. key 가 없을 때는 가상 DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다. 하지만 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있다.

key 값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯 설정하면 된다. key 값은 언제나 유일해야한다. 데이터의 고유값을 key 값으로 설정해야한다.

import React , { Component } from 'react';

class NewComponent extends Component {
    render() {
        const arr = [1,2,3,4,5];
        const arrList = arr.map(
            (num, index) => (<li key={index}>{num}</li>)
        );

        return (
            <ul>{arrList}</ul>
        );
    }
}

export default NewComponent;

상수에 담았던 배열을 state에 담을 수 있다.

import React , { Component } from 'react';

class NewComponent extends Component {
    state = {
        arr: [1,2,3,4,5]
    };
    render() {
        // const arr = [1,2,3,4,5];
        // const arrList = arr.map(
        const arrList = this.state.arr.map(
            (num, index) => (<li key={index}>{num}</li>)
        );

        return (
            <ul>{arrList}</ul>
        );
    }
}

export default NewComponent;

※ 데이터 추가, 제거할 때는 setState 메서드로 업데이트를 해야한다.
데이터 추가 - arr.push('...') 로 배열을 수정한다면 기존 배열을 직접적으로 수정을 하게 되는 것이기 때문에 사용하면 안된다. 하지만 기존 배열과 새 값을 합친 새 배열을 생성하는 concat을 사용하면 오류없이 제대로 작동한다.

addData = () => {
    this.setState({
        arr: this.state.arr.concat('새로운 값')
    });
}

데이터 제거 - 데이터 추가와 마찬가지로 기존 배열을 직접적으로 수정하지 않고 새 배열을 생성하여 처리하도록 한다.

    delData = (index) => {
        this.setState({
            // 기존 자바스크립트 문법
            arr: this.state.arr.slice(0,index).concat(this.state.arr.slice(index+1, this.state.arr.length))
            // ES6 문법
            // filter로 index 번째를 제외한 아이템만 가진 새 배열 생성
            arr: arr.filter((item, i) => i !== index)
        });
    }

반복되는 데이터를 렌더링할 때 key 값을 설정해야한다. key 값을 서정할 때는 언제나 유일해야한다. 중복되는 key 값이 있다면 렌더링 과정에서 오류가 발생한다.

검색

KBennyCC