[ React-Tutorial-08 ] 배열다루기2 제거와 수정

이전 섹션에서 배열에 데이터를 추가하는 방법과 배열 내부의 내용들을 화면에 보여주는 기능을 구현해 보았었다.

이번에는 배열 내부의 데이터를 제거하는 방법과 수정하는 방법을 알아볼 것이다.

01. 데이터 제거

id를 파라미터로 받아오는 handleRemove라는 함수를 만들고, PhoneInfoList로 전달한다.

// file: src/App.js
import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';
import PhoneInfoList from './components/PhoneInfoList';

class App extends Component {
  id = 2
  state = {
    information: [
      {
        id: 0,
        name: '유준호',
        phone: '010-0000-0000'
      },
      {
        id: 1,
        name: '한승훈',
        phone: '010-0000-0001'
      }
    ]
  }
  handleCreate = (data) => {
    const { information } = this.state;
    this.setState({
      information: information.concat({ id: this.id++, ...data })
    })
  }
  handleRemove = (id) => {
    const { information } = this.state;
    this.setState({
      information: information.filter(info => info.id !== id)
    })
  }
  handleUpdate = (id, data) => {
    const { information } = this.state;
    this.setState({
      information: information.map(
        info => id === info.id
          ? {...info, ...data}
          : info
      )
    })
  }
  render() {
    return (
      <div>
        <PhoneForm
          onCreate={this.handleCreate}
        />
        <PhoneInfoList 
          data={this.state.information}
          onRemove={this.handleRemove}
          onUpdate={this.handleUpdate}
        />
      </div>
    );
  }
}

export default App;

PhoneInfoList 에서는 props로 전달받은 onRemove를 그대로 전달 해줄것이다. 

이 함수가 전달되지 않았을 경우를 대비하여 해당 props를 위한 defaultProps도 설정해주자!

// file: src/components/PhoneInfoList.js
import React, { Component } from 'react';
import PhoneInfo from './PhoneInfo';

class PhoneInfoList extends Component {
  static defaultProps = {
    list: [],
    onRemove: () => console.warn('onRemove not defined'),
  }

  render() {
    const { data, onRemove } = this.props;
    const list = data.map(
      info => (
        <PhoneInfo
          key={info.id}
          info={info}
          onRemove={onRemove}
        />)
    );

    return (
      <div>
        {list}    
      </div>
    );
  }
}

export default PhoneInfoList;

그 다음에는, PhoneInfo 쪽에서 삭제 기능을 구현해보자. 우리는 삭제 버튼을 만들어서 해당 버튼에 이벤트를 설정할 것이다.

import React, { Component } from 'react';

class PhoneInfo extends Component {
  static defaultProps = {
    info: {
      name: '이름',
      phone: '010-0000-0000',
      id: 0
    },
  }

  handleRemove = () => {
    // 삭제 버튼이 클릭되면 onRemove 에 id 넣어서 호출
    const { info, onRemove } = this.props;
    onRemove(info.id);
  }

  render() {
    const style = {
      border: '1px solid black',
      padding: '8px',
      margin: '8px'
    };

    const {
      name, phone
    } = this.props.info;
    
   return (
      <div style={style}>
        <div><b>{name}</b></div>
        <div>{phone}</div>
        <button onClick={this.handleRemove}>삭제</button>
      </div>
    );
  }
}

export default PhoneInfo;

 삭제 버튼을 눌러서, 데이터가 제대로 제거 되는지 확인해보자.

02. 데이터 수정

이번엔 데이터 수정을 해보자. 수정을 할때에도 마찬가지로 불변성을 지켜줘야 한다. 기존의 배열과, 그리고 그 내부에있는 객체를 절대로 직접적으로 수정하면 안된다.

예를 들어서 아래와 같은 객체로 이뤄진 배열이 있다고 가정해보자.

const array = [
  { id: 0, text: 'hello', tag: 'a' },
  { id: 1, text: 'world' , tag: 'b' },
  { id: 2, text: 'bye', tag: 'c' }
];

여기서 기존값을 건들이지 않고 id가 1인 객체의 text 값을 'Korea'라는 값으로 바꾼 새로운 배열을 만들어 보겠다.

const modifiedArray = array.map(item => item.id === 1
  ? ({ ...item,. text: 'Korea' }) // id 가 일치하면 새 객체를 만들고, 기존의 내용을 집어넣고 원하는 값 덮어쓰기
  : item // 바꿀 필요 없는것들은 그냥 기존 값 사용

그러면 한번, 같은 원리를 사용하여 우리의 전화번호 정보를 수정해보자.

우리는 handleUpdate라는 함수를 만들건데, 이 함수는 id 와 data 라는 파라미터를 받아와서 필요한 정보를 업데이트 해준다.

이 handleUpdate는 PhoneInfoList의 onUpdate로 전달해준다.

// file: src/App.js
import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';
import PhoneInfoList from './components/PhoneInfoList';

class App extends Component {
  id = 2
  state = {
    information: [
      {
        id: 0,
        name: '유준호',
        phone: '010-0000-0000'
      },
      {
        id: 1,
        name: '한승훈',
        phone: '010-0000-0001'
      }
    ]
  }
  handleCreate = (data) => {
    const { information } = this.state;
    this.setState({
      information: information.concat({ id: this.id++, ...data })
    })
  }
  handleRemove = (id) => {
    const { information } = this.state;
    this.setState({
      information: information.filter(info => info.id !== id)
    })
  }
  handleUpdate = (id, data) => {
    const { information } = this.state;
    this.setState({
      information: information.map(
        info => id === info.id
          ? {...info, ...data}
          : info
      )
    })
  }
  render() {
    return (
      <div>
        <PhoneForm
          onCreate={this.handleCreate}
        />
        <PhoneInfoList 
          data={this.state.information}
          onRemove={this.handleRemove}
          onUpdate={this.handleUpdate}
        />
      </div>
    );
  }
}

export default App;

그럼 이제 PhoneInfoList 컴포넌트를 업데이트 해주자!

// src/components/PhoneInfoList.js
import React, { Component } from 'react';
import PhoneInfo from './PhoneInfo';

class PhoneInfoList extends Component {
    static defaultProps = {
        data: [],
        onRemove: () => console.warn('onRemove not defined'),
        onUpdate: () => console.warn('onUpdate not defined')
    }
    render() {
        const { data, onRemove, onUpdate } = this.props;
        const list = data.map( 
            info => (
                <PhoneInfo 
                    key={info.id} 
                    info={info} 
                    onRemove={onRemove}
                    onUpdate={onUpdate}
                />
            ) 
        );
        return (
            <div>
                {list}
            </div>
        );
    }
}

export default PhoneInfoList;

그리고 데이터를 컴포넌트로 렌더링하는 과정에서 PhoneInfo 에 onUpdate를 그대로 전달해 주었다.

그럼 이제 PhoneInfo 컴포넌트를 업데이트 해줄 차례이다. 이번에 수정할 코드는 꽤 많은데, 주석을 읽어가면서 코드를 작성해보도록하자.

// file: src/components/PhoneInfo.js
import React, { Component } from 'react';

class PhoneInfo extends Component {
    static defaultProps = {
        name: '이름',
        phone: '010-0000-0000',
        id:0
    }
    state = {
        // 우리는 수정 버튼을 눌렀을 떄 editing 값을 true 로 설정해줄것입니다.
        // 이 값이 true 일 때에는, 기존에 텍스트 형태로 보여주던 값들을
        // input 형태로 보여주게 됩니다.
        editing: false,
        // input 의 값은 유동적이겠지요? input 값을 담기 위해서 각 필드를 위한 값도
        // 설정합니다
        name: '',
        phone: '',
      }
    
    handleRemove = () => {
        const { info, onRemove } = this.props;
        onRemove(info.id);
    }
    // editing 값을 반전시키는 함수입니다
    // true -> false, false -> true
    handleToggleEdit = () =>> {
        const { editing } = this.state;
        this.setState({ editing: !editing });
    }

    // input 에서 onChange 이벤트가 발생 될 때
    // 호출되는 함수입니다
    handleChange = (e) => {
        const { name, value } = e.target;
        this.setState({
            [name]: value
        });
    }
    componentDidUpdate(prevProps, prevState) {
        // 여기서는, editing 값이 바뀔 때 처리 할 로직이 적혀있습니다.
        // 수정을 눌렀을땐, 기존의 값이 input에 나타나고,
        // 수정을 적용할땐, input 의 값들을 부모한테 전달해줍니다.
    
        const { info, onUpdate } = this.props;
        if(!prevState.editing && this.state.editing) {
          // editing 값이 false -> true 로 전환 될 때
          // info 의 값을 state 에 넣어준다
          this.setState({
            name: info.name,
            phone: info.phone
          })
        }
    
        if (prevState.editing && !this.state.editing) {
          // editing 값이 true -> false 로 전환 될 때
          onUpdate(info.id, {
            name: this.state.name,
            phone: this.state.phone
          });
        }
    }
    render(){
        const style = {
            border: '1px solid black',
            padding: '8px',
            margin: '8px'
        }
        const { editing } = this.state;

        if (editing) { // 수정모드
        return (
            <div style={style}>
            <div>
                <input
                value={this.state.name}
                name="name"
                placeholder="이름"
                onChange={this.handleChange}
                />
            </div>
            <div>
                <input
                value={this.state.phone}
                name="phone"
                placeholder="전화번호"
                onChange={this.handleChange}
                />
            </div>
            <button onClick={this.handleToggleEdit}>적용</button>
            <button onClick={this.handleRemove}>삭제</button>
            </div>
        );
        }

        // 일반모드
        const {
        name, phone
        } = this.props.info;
        
        return (
        <div style={style}>
            <div><b>{name}</b></div>
            <div>{phone}</div>
            <button onClick={this.handleToggleEdit}>수정</button>
            <button onClick={this.handleRemove}>삭제</button>
        </div>
        );
    }
}

export default PhoneInfo;

코드를 다 작성했다면, 결과물이 아래와 같이 나타나는지 확인해보자.

이 글은 Velopert님의 블로그에서 React 포스팅을보며 실습하며 공부한 자료입니다.