useRef를 통해 dom element에 접근하기도 하고, stale closure문제를 해결하는데에도 사용하는데, 실질적으로 어떻게 작동해서 이게 가능한지 궁금합니다.



안녕하세요!

useRef를 통해 만들어지는 것은 JS의 객체와 유사하다고 보면 됩니다. useRef를 통해 만든 값이 일반 객체와 다른점은, 매 렌더링 시 동일한 객체를 제공하는 것입니다.
- useRef<T>(initialValue: T): {current: T}
- (참고: https://github.com/facebook/react/blob/fd31724d5d41a4df71af55f710b46562874511f9/packages/react-reconciler/src/ReactInternalTypes.js#L388)
- (참고: https://ko.reactjs.org/docs/hooks-reference.html#useref)

useRef를 통해 받은 값은 useRef가 사용된 컴포넌트의 라이프사이클 동안 사용할 수 있습니다. JSX에 특정 DOM 컴포넌트에 ref={useRef를 통해 받은 값}을 추가하시게 되면, 컴파일러가 JSX를 컴파일하면서 JS로 변환을 시켜주고 해당 JS를 브라우저가 실행하면서 값을 채워넣어주는 것으로 알고있습니다. (참고: https://ko.reactjs.org/docs/jsx-in-depth.html)

stale closure의 경우는 useRef의 값이 항상 같은 객체이고 closure안에서는 이 객체를 "참조"하는 형식이기 때문에, 객체의 current 값이 바뀌면 closure 안에서도 바뀐 current 값을 사용할 수 있습니다.
(reference 관련 so 글 참고: https://stackoverflow.com/questions/8318357/javascript-pointer-reference-craziness-can-someone-explain-this)

저도 질문에 답변하려고 여러가지 실험들을 해보았는데요. 
Functional component로 gist를 한번 만들어보았습니다. 저도 헷갈리는 부분이 있긴하지만 확실히 일반 JS 객체 대신 왜 useRef를 사용해야하는 이유를 알게된 것 같네요. 
(https://gist.github.com/json9512/ef28abf2429c639ccbdd6b48c7c3efe5)

결론은 useRef의 동작 방식이 가능한 이유는 JS에서 객체를 접근할때 참조 형식으로 접근한다는 점과 useRef를 통해 받은 객체가 항상 동일하다는 점 때문인 것 같습니다.

제가 참고했던 아티클들 첨부할게요.
- https://dmitripavlutin.com/react-useref-guide/
- https://www.freecodecamp.org/news/react-under-the-hood/
- https://www.smashingmagazine.com/2020/11/react-useref-hook/
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Working_with_Objects#%EA%B0%9D%EC%B2%B4_%EA%B0%9C%EC%9A%94
- https://hewonjeong.github.io/deep-dive-how-do-react-hooks-really-work-ko/

퍼블리 소프트웨어 엔지니어

손정현

useRef의 작동방식이 궁금합니다

프로젝트에서 사용하는 이미지를 어디에 저장해야 할지 고민입니다. 
지금까지는 public폴더를 만들어서 제 로컬에 저장했는데, S3같은 외부 스토리지에 파일을 저장 한 뒤 링크로 접속하는 방법도 있는 것 같아서 어떤 방식으로 해야하는지 고민됩니다.

두 방법의 장단점이나, 다른 분들은 주로 어떻게 저장하는지 의견을 듣고싶습니다.  

react 프로젝트에서 image 파일을 보통 어디에 저장하시나요?

회사가 아직 소규모라 프로세스가 잘 잡혀있지 않습니다. 
현재까지 각자 로컬 환경에서 빌드 & 배포하고 있는데 이제 진짜 한계인 것 같아서 배포 자동화를 시도해 보려 합니다. 
속해 있는 조직에서는 배포 자동화를 어떻게 하고 계신지 궁금합니다...!!

react-native 배포 자동화 어떻게 하고 계시나요?

안녕하세요! 리액트 쿼리를 통해 페이지 네이션을 구현했습니다. 특정 페이지에서 데이터가 변경됐을 때 해당 페이지의 데이터를 다시 가져와서 페이지의 ui를 변경해주어야 합니다. 이때 refetch 또는 invalidate를 사용할 수 있는데 결과는 같은 것 같더라구요.

결과는 같지만 refetch와 invalidate의 동작이나 성능 또는 어떤 방면에서 차이가 있는지 문득 궁금해졌습니다!  

혹시 데이터를 새로 가져올 때 어떤 함수를 쓰면 좋을까요? 답변을 통해 좋은 인사이트를 얻고 싶습니다! 감사합니다.

리액트 쿼리 refetch vs invalidate

와 상세한 답변 너무 감사드립니다! 공부하면서 헷갈리는 점들이 많았는데 덕분에 많이 해소되었습니다! 감사합니다:)