useRef()

React에서 UI 제어 방식은 주로 'props'및 'state'를 사용하여 이루어진다.
그러나 useRef를 사용하여 DOM node나 React 컴포넌트 인스턴스에 직접 참조하여 생성하고 관리할 수 있다.

useRef는 'reference'의 줄임말이며, 여기서 참조라는 뜻을 가진다.
즉, 무엇인가를 참조할 때 사용한다.

따라서 내가 원하는 DOM 요소나 React 인스턴스에 reference하여 직접적으로 제어나 수정이 가능하다.

왜 사용하는가?

자바스크립트에서 특정 DOM을 선택해야할 때는 DOM Selector를 사용한다.
마찬가지로 리액트 프로젝트에서도 특정 DOM을 선택해야할 상황이 있는데

이럴 때, 리액트에서 ref라는 것을 사용한다.
함수형 컴포넌트에서 ref를 사용 할 때에는 React Hooks중 하나인 useRef()함수를 사용한다.

useRef() 함수 사용법

    const nextId = useRef(4);

    const onInsert = useCallback(
        text => {
            const todo = {
                id:nextId.current,
                text,
                checked: false,
            };
            setTodos(todos.concat(todo));
            nextId.current += 1;
        },[todos],
    );

1. useRef()를 사용하여 Ref 객체를 만든다.
2. 이 객체를 우리가 선택하고 싶은 DOM에 ref값으로 설정해 준다.
3. Ref 객체의 .current값은 우리가 원하는 DOM을 가르키게 된다. 그리고 포커싱을 해주는 DOM API focus()를 호출한다.

useRef함수는 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당한다.
반환된 객체는 값을 변경해도 다시 렌더링 되지 않으며, 컴포넌트가 다시 렌더링 되어도, 해당 current 속성값이 변하지 않는다.(=4로 초기화되지 않는다)

따라서 useRef는 내용이 변경되어도 알려주지 않으며,
current 프로퍼티를 변형해도 리렌더링을 발생시키지 않는다.
즉, 리렌더링할 필요가 없는 변수를 useRef로 관리할 수도 있다.

이를 통해 useRef 함수는 DOM 선택 용도 이외에도, 컴포넌트 안에서 조회 및 수정 가능한 변수를 관리하는 용도가 있다.
이렇게 변수를 관리할 경우 변수가 업데이트 된다고 해서 컴포넌트가 리렌더링 되지 않는다.
즉, 굳이 리렌더링 할 필요가 없는 변수라면 useRef로 관리해주는 것이 효율적이다.