💿 이 글의 목적

왜 React에선 변수 대신 useState를 쓰고, 왜 useState 대신 useRef를 쓸까? 이유를 알아보자.

💿 변수 대신 useState/useRef 훅을 쓰는 이유

바닐라 js에서는 데이터를 저장하기 위해서는 보통 변수에 저장한다.
그런데 react에서는 데이터를 담기 위해 변수를 사용할 때도 있고, 아니면 useState 또는 useRef를 사용하기도 한다.

이는 함수형 컴포넌트가 가지고 있는 특성과 관계가 있다.

기본적으로 함수는 비동기 처리를 하지 않는 이상 호출이 되면 코드를 실행하고 결과값을 리턴한 후 종료된다. 이 과정에서 함수 내에 선언된 변수들은 처리 과정에서 값이 변경되었다 하더라도 다시 호출되면 변경된 값이 아니라 기존에 할당된 값을 담고 있다.

함수형 컴포넌트 또한 함수와 동일한 프로세스로 처리된다. 따라서 컴포넌트 내에서 그 값을 변경하거나 저장하고 싶더라도 재렌더링이 일어나게 되면 새로 호출되기 때문에 값을 저장하거나 계속해서 참조할 수 없다.
바닐라 js에선 전역 변수 또는 클래스를 이용해 이를 해결하지만, react의 경우 구조상 '전역 변수를 어디서 선언할 것인가'? 또는 '그럴 거면 클래스형 컴포넌트를 쓰면 되지 않나?' 라는 물음표가 생길 수 밖에 없다. 이 물음표를 해결하기 위해서 useState / useRef 훅을 쓴다.

💿 useState 대신 useRef를 쓰는 이유

그렇다면 useState랑 useRef은 어떻게 다를까?
useState와 useRef는 컴포넌트와 생명 주기를 공유한다는 점에서 공통점을 가지고 있다. 즉, 렌더링이 일어나도 값이 초기화되지 않는다.
하지만 useRef는 side effect를 발생시키지 않는 반면에 useState는 호출되면서 렌더링을 일으키는 side effect를 발생시킨다.

잘못 안 점 !!
함수형 컴포넌트는 애초에 생명 주기 메서드를 가지고 있지 않다. 생명 주기 비슷하게 부여하기 위한 것이 useState 등의 Hooks임.
렌더링 될때마다 함수형 컴포넌트가 호출이 되는데 state로 관리하면 렌더링시 다시 호출이 되어도 값이 초기화되지 않는다고 이해하자.

💿 useState랑 useRef는 언제 써야할까?

useState는 이벤트 등의 상호작용 의해 변경하고 리렌더링을 통해 화면에 표시해야 하는 값이 있을 경우 (ex 장바구니 수량 변경) 그 값을 useState에 담아 관리한다.

useRef의 경우 DOM을 참조해 컴포넌트에서 사용하고 싶거나, 렌더링이라는 side effect를 일으키지 않으면서 재렌더링이 일어나더라도 값을 초기화시키고 싶지 않을 때 사용한다.