[음악 관리 프로그램] 음악 수정 기능 (데이터 수정)

음악 수정 기능을 추가했다. 정확히 말하면 음악 데이터의 속성중 comment를 수정하는 기능이다. 어떻게 동작을 하였는지 다시 공부하는 차 입력을 하고 그 입력한 데이터로 요청을 하고 데이터베이스를 수정하는 과정을 다시 복기해보겠다.

 

1. App.js

//App.js
import MusicDataService from './services/MusicService';
/*...*/
 const [musics, setMusics] = useState([]);
/*...*/

  useEffect(() => {      
    retrieveMusics();
  }, [refresh])

  const retrieveMusics = () => {
    MusicDataService.getAll()
      .then(res => {
        setMusics(res.data); //musics state 에 전송받은 데이터를 넣어준다.
      })
      .catch(e => {
        console.log(e)
      })
  }
  
  /*...*/
  const [musicdata, setMusicData] = useState({ //input state
    id: null,
    title: '',
    genre: '',
    rate: '',
    comment: ''
  });

  const handleInputChange = e => {	//입력 받은 데이터로 input state를 변환
    const { name, value } = e.target;
    setMusicData({ ...musicdata, [name]: value })
  }
  
  /*...*/
//음악 데이터 수정
const updateMusic = (id, cmt) => {  //수정할 데이터의 id(musics state에 속하는 해당 열의 id)
                                    //와 input state인 data(comment)
    let data = {                    
      comment: cmt
    };
    MusicDataService.update(id, data) //해당 데이터의 id와 수정할 data는 axios를 통해 HTTP request를
    //보내는 MusicDataService.js의 update함수에 전달 된다.
      .then(() => {
        setRefresh(refresh => refresh + 1);
        setEditOpened(false);
        refreshInput();
      })
      .catch(e => {
        console.log(e);
      });
  };
  /*...*/
  	{musics.map(m => 
  /*...*/
          <TextField name="comment" value={musicdata.comment} onChange={handleInputChange} /> //수정할 data 입력
          <Button onClick={() => updateMusic(m.id, musicdata.comment)}>저장</Button></div> : null //해당 음악의 id와 수정할 data를 
          //음악 데이터 수정 함수에 전달
  /*...*/

수정할 데이터를 입력하고 저장 버튼을 클릭하면 해당 음악의 id와 수정한 데이터가 updateMusic의 parameter로 전달 되고 해당 parameter는 axios를 통한 HTTP request를 실행하는  MusicDataService.js 의 update 의 parameter로 전달된다.

 

2. MusicDataService.js

//MusicDataService.js

import http from '../http-common' //REST api와의 서버통신을 위한 axios 모듈 url을 설정하는 파일

/*...*/

const update = (id, data) => { //App.js의 updateMusic 함수의 parameter로 전달된 id와 data
    return http.put(`/musicdatas/${id}`, data); //해당 url로 put 요청
}

/*...*/
export default {
    /*...
    ...
    ..
    */
    update
}

http라는 이름으로 import한 http-common은 REST api url인 localhost:5000이 담겨있다. 앞서 입력했던 data(comment)와 해당 음악의 id를 axios를 통해 REST api 에 put 요청을 한다.

 

3. musicdata.routes.js

//musicdata.routes.js

module.exports = app => {
    const musicdatas = require('../controllers/musicdata.controller.js');

    var router = require('express').Router();

    /*...*/

    router.put('/musicdatas/:id', musicdatas.update); //해당 route의 uri에 put 요청일 때 musicdatas.update 함수를 실행한다. 

    app.use('/', router)
}

backend인 REST api를 routing 해놓은 코드이다. 위에서 axios를 통해 설정한 URI의 메소드(put)로 요청이 들어오면 두 번째 parameter에 구현한 함수, musicdatas.update 함수를 실행 한다. 

 

4. musicdata.controller.js

//musicdata.controller.js

exports.update = (req, res) => { //첫 번째 parameter인 req에는 요청 정보가 담겨있다.
    const id = req.params.id;

    Musicdata.update(req.body, {
        where : {id : id}  //요청한 id와 일치하는 곳의 데이터를 update
    })
        .then(num => {
            if (num == 1) {
                res.send({msg : "업데이트 성공"})
            }
         else {
            res.send({
                num : console.log(num),
            })
            console.log(num)
        }
        })
        .catch (e => {
            res.status(500).send({
                msg : e + "업데이트 에러"
            })
        })
    }

update route에서 콜백함수에 해당하는 update 함수이다. REST api의 musicdata에 대한 요청인 request 객체로 해당 id에 접근하여 일치하는 데이터를 update한다.

 

정리하자면

1. App.js 에서 update할 comment 를 입력

2. 해당 데이터의 id와 comment는 axios 모듈 서버통신을 하는 MusicDataService의 put 요청을 하는 함수의 parameter로 전달

3. 전달된 id는 backend인 REST api 의 routing 모듈에서 put 요청 대응되고, 콜백함수인 update 함수 실행

4. update함수에서 id로 접근하여 데이터를 update