[React JS] ref와 useRef

 

ref

HTML, CSS, JS를 사용할 때, HTML에서 DOM요소에 id를 사용하여 이름을 붙이고 CSS에서는 id를 사용해 스타일을 적용하거나 JS에서는 id를 이용해 접근하여 이벤트 등 작업을 수행한다.

 

그렇다면 리액트에서는 id를 어떻게 사용할 까?

리액트에서 id를 사용한다면 유일성을 보장하지 못한다.

리액트는 컴포넌트 단위로 이루어지며, 컴포넌트가 여러번 사용되면 id 또한 여러 개 생기게 될 것이다.

 

그래서 우리는 id 대신 리액트에서는 ref를 사용하여 대체 가능하다.

ref는 컴포넌트 내부에서만 작동하고 전역적으로 작동되지 않기 때문에 유일성을 보장한다.

 

하지만 ref를 무조건 다 사용하는 것은 좋은 코드를 작성하는 방법이 아니다.

우리는 DOM을 직접 건드려야 할 때 ref를 사용한다.

DOM을 직접 건드리는 경우는 특정 input에 포커스를 주어야 될 경우, 스크롤 박스 조작, canvas에 그림을 그리는 등의 상황에서 ref를 사용할 수 있다.

 

 

useRef

ref는 클래스형 컴포넌트에서만 사용 가능했지만, useRef인 Hook이 등장하면서 함수형 컴포넌트에서도 ref를 쉽게 사용 가능하다.

 

< useRef 사용 예시 >

1. Ref 객체 생성

const textInput = useRef();

 

2. 선택하고 싶은 DOM에 속성으로 ref 값 설정

<input onChange={onChange} value={text} ref={textInput} />

 

 

3. ref 객체의 current 값으로 우리가 선택하고자 하는 DOM을 가리킴

textInput.current.focus();

counter.current += 1;
example.curent = setInterval(...);

 

▶ useRef는 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환한다.

▶ useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같다.

▶ .current 프로퍼티를 변경하더라도 리렌더링을 발생시키지 않는다.

 

=> ref는 변경 가능한 값을 담고 있는 상자라고도 할 수 있다. ref 객체 안의 값은 값이 변경되어도 렌더링을 발생시키지 않고 렌더링이 발생해도 값이 유지된다.