useState로 인스턴스 접근

아래 코드에서 wavesurfer 엘리먼트는 useRef로 컨테이너를 지정해서 그 안에 만들어졌다. 

const wavesurferRef = useRef(null);

useEffect(() => {
    let wavesurfer = null;
    const initWaveSurfer = () => {
      wavesurfer = WaveSurfer.create({
        container: wavesurferRef.current,
        ...optins
      });
...
  }, []);
    return (
    ...
    <WaveContainer ref={wavesurferRef} />
	...
	);

이제 useEffect 바깥의 코드에서 파형에 접근해야 하는데 wavesurferRef.current에서 메서드를 호출했다가 막혔다. wavesurferRef.current.method() is not a function 이런 에러였는데 해결하고 보니 당연한 일이었다.

 

wavesurferRef.current를 콘솔에 찍어보면 div 엘리먼트가 찍힌다. 나는 div에 메서드를 호출하고 있었던 것이다...

위 코드에서 useRef는 DOM 요소에 대한 참조를 생성할 뿐이기 때문에 내가 하려던 일을 하려면 wavesurfer 인스턴스를 따로 저장해서 관리했어야 한다. 

const [waveSurferInstance, setWaveSurferInstance] = useState(null);
...
setWaveSurferInstance(wavesurfer);

useEffect에서 wavesurfer를 생성한 후 useState로 인스턴스를 저장하면 다른 곳에서도 접근할 수 있다.