{풀스택} React 이론 9강 - useRef가 필요한 간단 이유

useRef란 무엇인가?

useRef는 React에서 제공하는 훅 중 하나로, DOM 요소에 직접 접근할 수 있게 해주는 기능이에요. 쉽게 말해, useRef를 사용하면 특정 HTML 요소를 지정하고, 그 요소에 대한 참조를 유지할 수 있습니다. 예를 들어, input 태그의 값을 직접적으로 관리하고 싶을 때 사용하죠.

useRef는 다음과 같은 방식으로 사용해요. 먼저, 컴포넌트 안에서 const myRef = useRef(null);처럼 변수를 선언하고, JSX 코드에서 <input ref={myRef} /> 형태로 ref 속성을 추가하면 돼요. 이렇게 하면 myRef라는 변수를 통해 input 요소에 접근할 수 있게 됩니다.

이때 주의할 점은 useRef로 참조한 요소는 리렌더링(rendering)이 발생해도 값이 유지된다는 거예요. 즉, 컴포넌트가 다시 그려져도 myRef는 여전히 같은 요소를 가리키고 있어요. 이 점이 useRef의 큰 장점 중 하나입니다.

useRef의 필요성

그렇다면 useRef는 왜 필요할까요? React는 상태(state) 기반의 프레임워크로, 상태가 변경되면 컴포넌트가 다시 그려져요. 그런데 input 같은 DOM 요소의 값을 직접적으로 변경하고 싶다면, 매번 상태를 업데이트하는 번거로움이 있어요. 이럴 때 useRef를 사용하면 훨씬 간편하게 DOM 요소에 접근할 수 있습니다.

예를 들어, 사용자가 버튼을 클릭했을 때 input의 값을 읽어오고 싶다면, useRef를 활용하는 것이 좋아요. 일반적으로는 상태를 업데이트하고, 그 상태를 통해 input 값을 관리하지만, useRef를 사용하면 직접적으로 input의 값을 가져올 수 있습니다. 이 방식은 특히 성능이 중요한 경우에 유리해요. 불필요한 렌더링을 줄일 수 있기 때문이죠.

또한, useRef는 컴포넌트가 마운트(mount)될 때 한 번만 참조가 생성되기 때문에, 메모리 관리 측면에서도 효율적이에요. 자주 변경되는 값이 아니라면 useRef를 통해 관리하는 것이 더 나은 선택이 될 수 있습니다.

useRef를 활용한 실전 예제

이제 useRef를 실제로 어떻게 활용할 수 있는지 예제를 통해 살펴볼게요. 간단한 React 컴포넌트를 만들어 보면서 input의 값을 버튼 클릭 시 콘솔에 출력해보는 거예요.

```javascript import React, { useRef } from 'react';

const MyComponent = () => { const inputRef = useRef(null);

const handleClick = () => {
    console.log(inputRef.current.value);
};

return (
    <div>
        <input ref={inputRef} type="text" />
        <button
    </div>
);

};

export default MyComponent; ```

위 코드에서 inputRef를 사용해 input 요소에 접근하고, 버튼 클릭 시 input의 값을 콘솔에 출력하도록 했어요. 이렇게 간단하게 DOM 요소에 접근하고, 값을 가져오는 데 useRef가 큰 역할을 합니다.

이 예제를 통해 useRef의 실용성을 느껴보셨을 거예요. 초기 상태 관리가 필요 없는 경우, 또는 성능이 중요한 경우에는 useRef를 적극 활용해보세요!