[음악 관리 프로그램] 메인 페이지 업데이트 (useEffect)

메인 페이지에는 모든 음악 데이터를 전송받는 함수가 실행되고 있었고 데이터가 추가되고 삭제되었을 때 메인 페이지의 업데이트가 필요했다.

/*...*/
useEffect(() => {
    retrieveMusics();
  },
    [])
    
/*....*/
  const retrieveMusics = () => {  //모든 데이터를 전송받는다.
    MusicDataService.getAll()
      .then(res => {
        setMusics(res.data);
      })
      .catch(e => {
        console.log(e)
      })
  }

 

1. 두 번째 파라미터에 실질적인 음악 데이터가 들어가게 되는 musics 객체를 의존값으로 설정한다.

 

무슨 이유에서인지 무한 루프가 발생했다. musics는 음악 데이터를 다루는 state이고 변경이 있을 때 useEffect안의 retrieveMusics 함수가 실행될 거라고 생각했는데 그러지 않았다. 이는 나중에 다시 파헤쳐보겠다.

 

2. retrieveMusics() 함수를 일정 주기마다 실행한다.

 

1번이 되지 않았기 때문에 이번 방법을 생각했는데 이건 작동이 되었다. setInterval 함수를 이용해 2ms 정도 마다 함수를 실행시켰다. 하지만 음악을 추가하고 삭제할때마다 그만큼의 딜레이가 있었고, 매 2ms마다 새로운 데이터를 전송받는 함수, 쓸모없는 행위가 반복되고 있다는 것이 매우 비효율적으로 느껴졌다. 실질적으로 어떤 서비스를 실시한다면 이렇게 할 일이 없을 것 같았다.

 

3. 데이터가 갱신되었는 지 알 수있는 flag인 refresh를 state로 두어 의존값으로 설정한다.

 

결과적으로 이 방법으로 해결하기로 하였다. 인터넷에 'refresh useEffect' 라고 검색하여 첫 번째로 나온 stackoverflow의 솔루션 을 참고했다. 상당히 간단하지만 이해가 쉽고 좋은 방법이라고 느꼈다. 

 

import MusicDataService from './services/MusicService';

/*...*/
const [refresh, setRefresh] = useState(0);  // 데이터 변경을 확인하는 flag

/*...*/
const [musics, setMusics] = useState([]);
  useEffect(() => {
    retrieveMusics();
  }, [refresh])  //의존값을 refresh 로 설정

/*...*/
   MusicDataService.create(data)
      .then(res => {
        setMusicData({
          id: res.data.id,
          title: res.data.tite,
          genre: res.data.genre,
          rate: res.data.rate
        })
        setRefresh(refresh => refresh + 1);   //데이터가 추가되었을 때 1을 더하고
      }
      )
      
    MusicDataService.remove(id)
        .then(res => {
            console.log(res.data);
            setRefresh(refresh => refresh - 1);  // 삭제되었을 때는 1을 빼서 useEffect를 실행
        })

 

데이터를 추가, 삭제 할 때마다 refresh에 변화를 줘 useEffect를 실행하게 하는 것이다. 결과적으로 불필요한 실행 없이 데이터가 추가, 삭제 되었을 때마다만 필요한 실행이 있었다.