성능 성능 성능을 잡자 - useRef( )

프론트단에서 성능을 잡기 위해

성능잡는 방법을 대략적으로 찾아 보았다

성능잡는 방법

1. 통신 성능 개선
2. 렌더링 성능 개선

이중에서 렌더링 성능 개선에 집중해 보기로 했고

리엑트 라이프 사이클을 다시한번 되짚어 보게됬다

우리가 흔히 사용하는 훅들에는 뎁스(deps) 가있다

	useEffect ( () =>{
   	...
   },[👉deps])

요 뎁스를 넣는건 자유지만 대부분 훅 내부 변수의 상태들이 들어가게된다

요 뎁스들 떄문에 결국 컴포넌트가 렌더링 되게되고

뎁스들을 어떻게하면 효율적으로 렌더링 할수있게 할지에대해 찾아보니

"useRef()" 라는 정보가 있었다

리엑트에서 돔요소를 직접적으로 컨트롤 하고싶을때 사용하는녀석인줄 알았는데 쓰임이 또있었다

useRef()

1. 변수관리 할때 사용 - 리렌더링이 일어나면 안되는 경우
2. Dom 선택시 사용

우린 첫번쨰를 주이깊게 보고자한다

const ref = useRef( 초기값 )

console.log( ref ) // { current : 초기값}
ref.current = 바꿀값 // { current : 바꿀값}

👉 반환된 ref 는 컴포넌트 전생애주기를 통해 유지가 된다(컴포넌트 언마운트 전까지 값 유지됨)

마운트: 컴포넌트가 처음 나타났을 때  
언마운트: 컴포넌트가 사라질 때 

useRef의 값은 컴포넌트의 생애주기를 통해 유지가 되어 컴포넌트가 렌더링이 되어도 값을 유지한다.