[ React ] React Hooks 정리 3 - useRef

 

useRef 

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

2. Dom 선택시 사용 

 

1 - 1 . 변수 관리 

state가 변경될때마다 컴포넌트는 렌더링이 일어나서 성능이 안좋아질 수 있음

리렌더링을 발생시키지 않으므로

변화를 감지해야 하지만, 그 변화가 렌더링을 발생시키면 안되는 경우에는 useRef를 사용한다.

 

const ref사용 변수명 = useRef( 초기값 )

const testRef = useRef(0)
console.log(testRef)    // {current: 0}

/* useRef를 사용한 변수에 값 할당, 사용은 current를 사용한다 */
testRef.current = 2
console.log(testRef) = // {current: 2}
console.log(testRef.current)    // 2

 

 

1 - 2 . 변수 관리  :  일반 변수와의 차이

일반 변수도 state와는 다른 그냥 값이라 값이 변경되면 렌더링이 일어나지 않기 때문에

일반 변수를 사용해도 되겠다 싶겠지만, 

렌더링이 일어나는 순간 함수형 컴포넌트는 변수들도 모두 초기화가 되어 

일반 변수를 사용하면 렌더링 후 초기값을 갖게 되므로 useRef와는 다르다.

일반변수는 렌더링시 값이 초기화되지만,
useRef의 값은 컴포넌트의 생애주기를 통해 유지가 되어 컴포넌트가 렌더링이 되어도 값을 유지한다.

 

2 Dom Element 접근

const 선택한Element의 변수명 = useRef()

const inputRef = useRef()
console.log(inputRef.current)    // ref로 선택한 input element의 정보

<input ref="inputRef"/>

 

 

---

 ✔️ 참고

https://www.youtube.com/watch?v=VxqZrL4FLz8&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=3 

https://www.youtube.com/watch?v=EMK8oUUwP5Q&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=4