[React] useEffect와 useRef 활용하기

데이터가 로딩된 후에 ref를 사용해 참조하고 있는 값에 접근해서 값을 변경하려하니 객체가 null이라 접근할 수 없다는 오류가 발생했다.

isLoaded가 true이면 dom 객체들을 로딩해야한다.

 useEffect(() => {
    setIsLoaded(true);
    inputsRef.current[0].current.value = problem.title;
  }, []);

흐름대로 코드를 작성하면 이렇게 되지만,
setIsLoaded를 수행한다고해서 바로 dom객체가 마운트 되는 것은 아니다.
이렇듯 마운트되지 않은 상태에서 ref를 이용해 객체에 접근하려하니 오류가 날 수 밖에 없었다.

input값을 ref가 아닌 state를 사용해서 접근한다면
위의 코드를 사용해도 문제 없을 것이다.
state는 항상 처음부터 존재하는 것이기 때문에 어느 때에 접근해도 문제가 없지만,
내가 선언한 ref는 isLoaded 상태가 false이냐 true이냐에 따라 다르기 때문에 이에 접근하기 위해서는 현재 DOM에 마운트된 객체를 접근하고 있는지를 확인하도록 해야한다.

이 문제를 해결하기 위해 아래와 같이 코드를 수정했다.

  useEffect(() => {
    if (isLoaded) { // DOM이 로드된 상태이면
      console.log(inputsRef.current[0]);
      inputsRef.current[0].current.value = problem.title;
    }
    else setIsLoaded(true); 
  }, [isLoaded]);

원래는 useEffect함수의 두 번째 인자에 빈 배열을 전달하여 마운트된 직후에만 사용하도록 했지만,
isLoaded의 변경과 input 데이터 변경이 각각 한 번씩, 동기식으로(실행 순서가 지켜져야함) 이루어져야했기 때문에 의존성 값을 isLoaded로 설정했다.

이렇게 하면, 컴포넌트가 처음 마운트된 후 isLoaded가 true로 변경될 것이고 이에 따라 로딩이 완료된 DOM객체가 올려지게 된다. 이후에 또 useEffect를 한 번 더 실행하게 되는 시점엔 isLoaded된 상태이므로 정상적으로 ref를 이용해 input에 접근할 수 있게 된다.

원래 이 이슈를 해결하기보단 회피하려고 ref쓰던 거를 state로 바꿔버릴까 했지만,, ㅎ
ref를 사용해서도 충분히 해결할 수 있었던 문제임을 보일 수 있었다.