(React & Express 를 이용한 웹 어플리케이션 개발하기) 7일차 - state 배열 처리 (immutability Helper)

www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert/lecture/4151?tab=curriculum

React & Express 를 이용한 웹 어플리케이션 개발하기 - 인프런

---

// 모듈을 설치
npm install --save react-addons-update

// 프로젝트에서 사용하기 위해 import
import update from 'react-addons-update'

배열이나 객체의 state를 보다 편하게 변경, 수정, 추가, 삭제 하기위하여 사용하는 모듈

페이스북에서 자체개발하며 사용하기 편하다.

 

import React from 'react';
import update from 'react-addons-update';

class App extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            number: 0,
            str: 'str',
            array: [1, 2, 3, 4, 5],
            list: {
                content: '',
                title: ''
            }
        }

        this.addNumber = this.addNumber.bind(this);
        this.removeNumber = this.removeNumber.bind(this);
        this.applyValue = this.applyValue.bind(this);
    }

    // immutability Helper로 배열 원소 추가
    addNumber(e){
        this.setState({
            number: this.state.number+1,
            array: update(
                this.state.array,
                {
                    $push: [this.state.number]
                }
            )
        });
    }

    // immutability Helper로 배열 원소 제거
    removeNumber(e){
        this.setState({
            array: update(
                this.state.array,
                {
                    $splice: [[0, 1]]
                }
            )
        })
    }

    // input에 이벤트가 걸려오면 state의 value를 이 메소드에서 변경하도록함
    applyValue(e){
        this.setState({
            list: update(
                this.state.list,
                {
                    [e.target.name]:{$set: e.target.value}
                }
            )
        })
    }

    render(){
        return (
            <div>
                <button onClick={this.addNumber}>배열 추가</button>
                &nbsp;
                <button onClick={this.removeNumber}>배열 제거</button>
                &nbsp;
                title: <input id='title' name='title' value={this.state.list.title} onChange={this.applyValue}/>
                &nbsp;
                content: <input id='content' name='content' value={this.state.list.content} onChange={this.applyValue}/>
                <br/>
                <p>{this.state.number}</p>
                <br/>
                {this.state.array}
                <br/>
                title: {this.state.list.title}
                <br/>
                content: {this.state.list.content}
            </div>
        );
    }
}

export default App;

사용법은 간단하게 this.setState객체에서 변경할 배열이나 객체를 지정하여 update로 사용한다.

$push를 사용하여 추가할 값을 지정하거나

$splice를 사용하여 원소값을 제거

$set를 사용하여 특정 객체의 원소의 값을 변경할 수 있다.