[React Hook] 상태 훅(State Hook)을 내부함수로 정의할 경우 유의사항

이 소스 자체가 올바르다고 보긴 어렵겠지만 나중에 또 뻘짓할수도 있는점을 대비해 정리한 글

 useEffect(() => {
   console.log(`playIndexes : ${playIndexes}`);
 }, [playIndexes]);

 useEffect(() => {
    if(isSuffle) {
      setPlayIndexes(p => {
        const rndTargets = [...p.slice(0, currentPlayIdx), ...p.slice(currentPlayIdx + 1, p.length)].sort(p => Math.random() - Math.random());
        const result = [...rndTargets.slice(0, currentPlayIdx), p[currentPlayIdx], ...rndTargets.slice(currentPlayIdx, p.length)];
        console.log(`suffle result: ${result}`); // playIndexes 의 useEffect 상에 로그와 값이 다르게 표시됨. 구현시 유의할것
        return result;
      });
    }
    else {
      setPlayIndexes(p => p.sort());
    }
  }, [isSuffle]);

개인 프로젝트에서 음악 재생리스트를 랜덤하게 정렬하는 셔플(Suffle) 기능 구현 중 위와 같이 구현한 코드가 로그상의 순서와 실제 정렬 순서가 다른 점을 깨닫게 되었다.

 

다르게 찍히는 Index 순서

디버그의 경고 문구에 위와 같이 사용하라는 듯한 문구가 떠서 시키는 대로 했더니 이모양이 되었다. 그래서 아래와 같이 수정했다.

  useEffect(() => {
    console.log(`playIndexes : ${playIndexes}`);
  }, [playIndexes]);

  useEffect(() => {
    if(isSuffle) {
      const p = playIndexes;
      const rndTargets = [...p.slice(0, currentPlayIdx), ...p.slice(currentPlayIdx + 1, p.length)].sort(p => Math.random() - Math.random());
      const result = [...rndTargets.slice(0, currentPlayIdx), p[currentPlayIdx], ...rndTargets.slice(currentPlayIdx, p.length)];
      console.log(`suffle result: ${result}`);
      setPlayIndexes(result);
    }
    else {
      setPlayIndexes(p => p.sort());
    }
  }, [isSuffle]);

 

정상적으로 나오는 Index 순서