[React] React useState와 useRef의 차이점

useState와 useRef의 차이점

리액트를 공부하던 중, state를 관리하기위한 useState는 정말 많이 썼지만, 이와 비슷하게 useRef라는 hook이 있다는 사실을 알게되었다. 이번 포스팅에서는 이 둘의 차이점과, useRef의 사용 예시를 코드로 보면서 설명하도록 하겠다.

1. useState

• state가 변하면 해당 state를 가지고 있는 컴포넌트가 리렌더링된다.
• 컴포넌트가 리렌더링 되면서 바뀐 state가 바로 UI에 적용되어 보여질 수 있다.
• 초기값을 인자로 받아 state를 초기화한다.

2. useRef

• 값이 변하더라도 컴포넌트가 리렌더링되지 않는다.
• 초기값을 설정할 필요가 없으며, 주로 초기값이 없는 경우에 사용된다.
• 주로 참조된 DOM요소 또는 다른 값에 접근할 때 사용한다.

정리하자면, useState는 컴포넌트의 상태를 다루는 데에, useRef는 주로 DOM요소에 대한 참조를 다루는 데에 사용된다. DOM 요소에 대한 참조를 다룬다는게 어떤 의미일까? 같이 아래 코드를 살펴보도록 하자.

useRef의 쓰임새

위의 코드를 보면 App 컴포넌트에서 Input 컴포넌트를 불러오는데, prop으로 ref={inputName}과 ref={inputEmail}을 전달한 것을 볼 수 있다. 이 prop은 Input 컴포넌트에서 쓰이고, Input 컴포넌트에서 이를 쓰기 위해 forwardRef라는 특별한 함수로 컴포넌트를 묶어준 것을 볼 수 있다. Input.jsx 7번째 줄에서 ref를 input tag에 적용시킨다. 그럼 이 전달된 ref의 쓰임은 무엇일까? 그건 다시 App.jsx 파일을 보면 된다. handleSaveData함수를 보면, useRef로 만들어준 inputName과 inputEmail의 값을 불러와서 객체에 저장시키는 것을 볼 수 있다. 이렇게 DOM 요소를 참조하여 다른 컴포넌트에 있는 input tag의 값을 가져오거나, 다른 컴포넌트의 DOM 요소를 직접 제어할 수 있는것이 바로 useRef의 쓰임새이다. 어떻게 보면 포인터의 역할을 하는것이다. C언어의 포인터처럼, 직접 해당 요소를 제어하는 것이 아닌 포인터를 통해 요소를 제어하는 것과 비슷한 원리인것 같다.

마치며

C언어의 포인터와 함수 포인터 등과 같은 개념은 다른 언어에서는 쓰이지 않는다고 생각했다. 하지만 React를 제대로 배우면서, 이름만 포인터가 아닌것이지 사실상의 포인터와 함수 포인터의 역할을 하는 코드를 많이 볼 수 있었다. 예를 들어 prop중 하나로 함수를 설정하여 하위 컴포넌트에서 그 함수를 호출할 수 있는것이 함수 포인터와 비슷하다고 생각했다. 꼭 React 뿐 아니라 여러 다른 언어와 프레임워크에서도, 포인터의 이름을 쓰지 않을 뿐 주소를 통해 뭔가를 제어하는 경우가 많을것이다. 이는 결국 포인터와 다를바가 없다는 것을 느꼈다. 학부 1학년 때 C언어의 포인터의 장벽에서 좌절을 경험했는데, 3학년이 된 지금와서 생각해보면 그저 포인터는 주소일 뿐이고 주소를 통해 무언가를 제어할 뿐이라는 사실을 깨닫게 되었다. 요즘 공부하는 것은 React이지만 요즘 전반적인 지식이 늘어가는 것을 느껴 기쁘다. 요즘 뭔가를 새로 배우는 것 자체가 나에게 카타르시스(?)를 주는것 같다. 이 재미를 잃지 않았으면 좋겠다.