react useRef

    
useRef는 프로그래밍에서의 "포인터" 개념과 유사한 방식으로 동작합니다. 다른 언어에서의 포인터는 메모리의 특정 주소를 가리키는데, JavaScript와 React에서의 useRef는 특정 DOM 요소나 변수를 "가리키는" 역할을 합니다.



즉, useRef를 사용하면:



특정 DOM 요소에 직접 접근할 수 있습니다.

렌더링 사이에서 변하지 않는 값을 저장하고 유지할 수 있습니다.

이를 통해 우리는 특정 요소나 값에 "포인터"처럼 직접 접근하고 작업을 수행할 수 있습니다.



`useRef`는 React에서 특정 요소(예: 버튼, 입력란)를 "가리키고" 관리하려 할 때 사용합니다. "가리킨다"는 말은 그 요소에 대한 참조를 갖는다는 의미입니다.



`useRef`를 사용하면:

1. 특정 요소에 직접 접근할 수 있습니다. (예: 입력란에 자동으로 커서를 위치시키기)

2. 값이 바뀌더라도 컴포넌트가 다시 그려지지 않도록 값을 저장할 수 있습니다.



간단한 예시로, 웹 페이지에 버튼이 있고, 버튼을 누르면 텍스트 입력란에 자동으로 커서를 위치시키고 싶다고 가정해봅시다.



이 작업을 위해서 `useRef`를 사용하여 입력란을 "가리킵니다". 그리고 버튼을 눌렀을 때, 그 "가리킨" 입력란에 커서를 위치시킵니다.



```html

import React, { useRef } from 'react';



function MyApp() {

  // 입력란을 가리키기 위한 참조를 생성합니다.

  const myInput = useRef();


  // 버튼을 누르면 입력란에 커서를 위치시킵니다.

  const handleClick = () => {

    myInput.current.focus();

  };


  return (
    
    <div>

      <input ref="{myInput}" />

      <button onclick="{handleClick}">입력란에 커서 위치시키기</button>

    </div>

  );

}


export default MyApp;

```



이 예제에서, `useRef`는 `myInput`이라는 변수를 통해 입력란을 "가리키고" 있습니다. 그리고 버튼을 클릭하면, 해당 입력란에 직접 접근하여 커서를 위치시킵니다.