React 공부노트2

velopert를 보며 공부하는 React

📌데이터 제거와 수정

👀 데이터 제거

• 데이터 제거 역시 추가와 마찬가지로 기존의 배열 데이터를 건들이지 않으면서 데이터를 제거해야 함.
• const arr = [1,2,3,4,5] 에서 3을 제거하는 상황
  • array.slice(0,2).concat(array.slice(3,5))
  • [ ...array.slice(0,2), ...array.slice(3,5) ]
• 그러나 위보다 더욱 간단한 방법으로도 구현 가능.
• FILTER 라는 내장함수 : 특정 조건에 부합되는 원소들만 뽑아내서 새 배열을 만들어줌.
• array.filter(num => num!==3) : 3이 제외된 배열.

👀 전의 예제로 실습.

💻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})
    })
  }
  handleRomove = (id) =>{
    const {information} = this.state;
    this.setState({
      information: information.filter(info => info.id!==id)
    })
  }
  render() {
    return (
      <div> 
        <PhoneForm
          onCreate={this.handleCreate}/>
          <PhoneInfoList data ={this.state.information}
          onRemove = {this.handleRomove} />
      </div>
    );
  }
}

export default App;

• handleRemove 함수를 filter 내장함수를 통해 만들어줌.
• 이 함수를 PhoneInfoList 컴포넌트에 넘겨줌.

💻 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;

• Props를 못받을 경우를 대비해 defaultProps에 대비.
• PhoneInfo에 onRemove 넘겨줌.

💻 PhoneInfo.js

import React, { Component } from 'react';

class PhoneInfo extends Component {
    static defaultProps = {
        info: {
            name: '이름',
            phone: '010-0000-0000',
            id: 0
        }
    }
    handleRemove = () => {
        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;

• handleRemove 함수에 props로 받은 onRemove 함수 사용하여 함수 만들어줌.
• info.id를 매개변수로 넣어주어 해당 id를 제외한 값 return
• button 으로 handleRemove 함수 넣어줌.

👀 데이터 수정

• 데이터 수정 또한 불변성을 지켜줘야 함.

💻App.js

class App extends Component {
  ...
  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>
	);
}
}

• {...info, ...data} : 새 객체를 만들어서 기존의 값과 전달받은 data를 덮어씀.
• data : 기존의 값을 그래도 유지.

💻PhoneInfoList.js

class PhoneInfoList extends Component {
  static defaultprop ={
    data:[],
    onRemove:() ~
    onUpdate:() ~
}
    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>
     );
}
}

💻PhoneInfo.js

class PhoneInfo extends Component{
  static defaultProps = {
    info: {
      name: '이름',
      phone: '010-0000-0000',
      id: 0
    },
  }
  state = {
    editing: false,
    name:'',
    phone:'',
  }
  handleRemove = () => {
    const {info, onRemove} = this.props;
    onRemove(info.id);
  }
  handleToggleEdit = () => {
    const {editing} = this.state;
    this.setState({editing:!editing});
  }
  handleChange = (e) =>{
    const {name, value} = e.target;
    this.setState({
      [name]:value
    });
  }
  componentDidUpdate(prevProps, prevState) {
    const {info, onUpdate} = this.props;
    if(!prevState.editing && this.state.editing) {
      this.setState({
        name: info.name,
        phone: info.phone 
      })
    }
    if(prevState.editing && !this.state.editing){
      onUpdate(info.id, {
        name: this.state.name,
        phone: this.state.phone
      });
    }
  }
  render() {
    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>
);
}}

• state 수정 버튼을 누른 경우 editing 값을 true로 설정.
• 유동적인 editing 값을 위하여 state 값에 넣어줌.
• handleToggleEdit : editing 값을 반전시켜주는 함수. editing:!editing
• handleChange : onChange 이벤트를 처리해주는 함수.
• componentDidUpdate : editing 값이 바뀌는 경우를 처리해주는 함수.
  • 수정을 눌렀을 때, 기존의 값이 input에 나타나고
  • 수정을 적용할 때, input의 값들을 부모에게 전달.
  • if(!prevState.editing && this.state.editing) : editing 값이 false -> true 전환시
  • this.setState({ name: info.name, phone:info.phone}) : info의 값을 state에 삽입.
  • if(prevState.editing && !this.state.editing) : editing 값이 true -> false 전환시
  • onUpdate(info.id, {name: this.state.name, phone: this.state.phone}) : onUpdate 함수 실행.

<출처 : velopert>