infoWindow 렌더링 관련 질문

[GyeongChan-Jang]

안녕하세요!
라이브러리 잘 사용하고 있습니다.
사용하다가 예제보고 궁금증이 생겨 질문 남깁니다.

https://zeakd.github.io/react-naver-maps/examples/map-tutorial-6-geolocation/

이 예제에 useRef대신 useState로 infoWindow를 렌더링하는 이유가 있을까요?
infoWindow의 DOM을 컨트롤한다는 관점에서
useRef가 오히려 사용성에 더 맞지 않나 싶어서요.
state사용시 타입처리에 어려움도 있네요.

혹시 state를 사용하신 다른 이유가 있으신지 궁금해서 여쭙습니다.

[zeakd]

일반적은 dom 은 ref 를 적용하였을 때 mount 단계에서 반드시 ref 가 존재하는데요.

function Page() {
  const ref = useRef(null);
  
  useEffect(() => {
    console.log(ref.current) // <div />
  }, [])
  
  console.log(ref.current) // null 
  
  return <div ref={ref} />
}

dom 이 아닌 component 의 경우 ref 가 잡히는 시점이 mount 되는 시점이 아니기 때문에 ref 가 사용가능해지는 타이밍을 알기 어렵습니다.

function Page() {
  const ref = useRef();
  
  useEffect(() => {
    console.log(ref.current) // undefined  (???)
  }, [])
  
  console.log(ref.current) // undefined 
  
  return <InfoWindow ref={ref} />
}

따라서 state 를 사용해 ref 가 업데이트 되는 시점을 가져옵니다. 타입은 아래처럼 작성해주시면 됩니다.

function Page() {
  const [ref, setRef] = useState<naver.maps.InfoWindow | undefined>();
  
  useEffect(() => {
    console.log(ref) // infowindow get
  }, [ref])
  
  console.log(ref) // undefined 
  
  return <InfoWindow ref={setRef} />
}

[zeakd]

ref 를 가져오는 시점이 중요하지 않다면 useRef 를 사용하셔도 무방합니다. 또 useRefState 같은 3rd party custom hook 을 사용해도 좋습니다

[GyeongChan-Jang]

set함수를 ref에 넣는 코드는 처음봐서 여쭙게 됐네요.
바로 이해했습니다.
명쾌한 설명 감사합니다!