리액트 Ref 와 DOM

리액트에 제어 컴포넌트와 비제어 컴포넌트를 공부하면서 제어 컴포넌트에서는 useState의 set을 사용해서

특정 값을 변경하기 때문에 렌더링에 문제가 발생할 수 있지만

비제어 컴포넌트에서는 ref를 사용하여 불필요한 렌더링을 방직할 수 있다고 배웠다.

( react-hooks-input 라이브러리는  비제어 컴포넌트 방식을 사용하여 불필요한 렌더링을 방지)

 

그래서 리액트 공식문서에 있는 ref와 DOM 부분에 대해서 공부해 보았다.

https://reactjs-kr.firebaseapp.com/docs/refs-and-the-dom.html

Refs and the DOM – React

 

리액트 공식 문서에서는 ref를 DOM이나 React 엘리먼트 객체에 접근할 때
사용할 수 있도록 만든 것 같았다.

내가 알고 있는 ref는 렌더링의 영향을 받지 않는 값을 만들어야 할 때나
특정 엘리먼트 input 등에 접근해야 할 때 사용했었다.  

사용하면서도 주변에서 ref의 사용은 많이 못 했던 것도 있고 사용을 지양하는 쪽으로 

알게 되어 가능한 사용하지 않으면서 프로젝트를 경험했었는데 

(영상 미디어 관련 컴포넌트를 만들면서 다른 방법이 있을까 고민했었다) https://zoon-bloom.tistory.com/55

ref의 사용은 왜 지양해야 하는데 명확한 이유나 공식 문서는 찾아보지 않았던 것 같다.

리액트 state위치에 대해 생각? 해보기

https://reactjs-org-ko.netlify.app/docs/lifting-state-up.html

state colocation 에 대해서도 참고하면 좋을 듯?

https://zoon-bloom.tistory.com/121

 

리액트에서는 state가 적절한 위치에 있어야 한다고 권장하는 것 같았다.

그래서 해당 문서를 보니 state가 공통적으로 필요로 하는 자식 컴포넌트가 있다면 

그 state는 부모 컴포넌트에서 작성하여 props로 넘겨주는 것이 옳다고 말하고 있다.

하향식 데이터의 흐름! 결국 state 가 적절한 컴포넌트에 위치한다면 디버깅과 
가독성에 있어서도 효과를 볼 수 있다! 

그래서 ref는? 무슨 상관이지?

ref는 useRef를 통해 리액트 함수형 컴포넌트에서 사용되게 되는데

 

useRef()가 순수 자바스크립트 객체를 생성하며. 
useRef는 매번 렌더링을 할 때 동일한 ref 객체를 제공한다.

useRef로 인해 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지되며.

useRef로부터 생성된 객체는 current 값이 변화해도 리렌더링에 관여하지 않는다는 점이다

 

즉  ref는 렌더링에 관여하지 않으면서 값이 유지되기 때문에 오류가 생기거나 
디버깅하는 것에 정확한 위치를 찾기 어려워지기 때문이다

 

이 해당 중요 부분은 참고 블로그를 통해 알게 되었는데 블로그에서 굉장히 자세히 

코드를 통해 설명해 주어 흥미롭게? 이해할 수 있었다.

아직 100프로 이해하지는 못했지만..  ref에 대해 깊게 생각해 보는 시간이었다.

 

참고 블로그 : https://programming119.tistory.com/265