리팩토링 일지: useRef 공부하기

지식 습득하기

어제에 이어 공식문서에서 useRef 부분을 정독했다.

useRef

useRef은 화면에 직접적으로 렌더링되지 않는 정보를 저장하는 hook이다. 이에 따라 useRef가 참조하는 정보가 변경되어도 리렌더링 되지 않는다. 이번에도 내 코드에서 useRef를 사용할 수 있는 부분을 추려보았다.

DOM 요소에 접근하는 case

• 목적지 상세정보 컴포넌트의 portal 메서드

  • 내가 맡은 목적지 상세정보 컴포넌트는 모달 창으로 구현되어 있다. 나는 이 목적지 상세정보 컴포넌트가 props를 받는 상위 컴포넌트에게 스타일적으로 구애받지 않게 하고 싶었다. 이에 따라 portal 메서드를 이용하여 최상위 부모의 자식요소로 이동시켰다. 이 과정에서 portal의 타겟이 되는 id값을 가져올 때 getElementById 메서드를 사용했다. 이번에는 getElementById로 DOM 요소에 접근하는 대신, ref 객체로 저장하여 모달창에 props로 내려주도록 변경해보려 한다.

• Map 컴포넌트의 cotainer

  • 현재 Map 컴포넌트를 감싸는 Container 태그도 getElementById 메서드로 가져오고 있다. 이를 ref 객체를 활용하여 리팩토링할 수 있다.
  • 지도에 표시되는 마커를 클릭했을 때 이벤트가 발생하도록 구현되어 있는데, 이 이벤트를 추가하는 코드라인에도 ref 객체를 활용할 수 있을 것 같다.

주의할 점

• 렌더링과 연관된 데이터는 state로 관리하자. 렌더링 중에 읽거나 사용해야 하는 데이터는 ref 객체로 참조할 수 없다.

학습 마무리

1차 리팩토링에 필요한 지식을 학습 완료했다. 우선 지금까지 공부한 내용을 토대로 리팩토링을 하고 다음 리팩토링 단계로 넘어갈 계획이다.

+ 최근에 최적화 기법에도 관심이 생겼다. 시간이 된다면 혼자옵서예 프로젝트에도 적용할 수 있는 기술을 찾아서 도전해보고 싶다. 특히 목적지 리스트에서 이미지가 한 박자 늦게 렌더링 되는 현상을 꼭 수정하고 싶다. 정말 배울게 산더미처럼 쌓여 있다..