[React] useRef

 

useRef는 함수형 컴포넌트에서 변수를 생성하고 이를 DOM 요소나 다른 값에 참조할 때 사용한다.

상태가 변경되더라도 리렌더링이 되지 않으며 특정 DOM 요소에 접근이 가능하다

 

아래와 같이 사용하며 useRef에 초기값을 넣으면 {current: 초기값} 이라는 객체를 반환하고

current 키 값을 이용해서 값을 변경한다

const refObject = useRef(초기값)
console.log(refObject.current) //초기값

 

이렇게 생성한 useRef 객체는 아래와 같은 특징이 있다

• DOM 요소에 직접 접근 가능
• 컴포넌트가 랜더링이 계속 되어도 언마운트 되기 전까지 값이 그대로 유지
• 객체 값을 변경해도 리렌더링 되지 않는다

위 특징들 때문에 

1. 변경시 렌더링이 발생하지 않게 하기 위함
2. Dom 을 조작하기 위함

의 경우에 사용한다

 

1. 변경시 렌더링이 발생하지 않게 하기 위함

 

2. DOM 을 직접 조작

 

ref 를 통해 레퍼런스 객체를 걸어주면 직접 dom에 접근한다