리액트에서 변수 관리 시 useRef를 사용하는 것은 let을 사용하는 것과 어떤 차이가 있나요?
분야: 프론트엔드
useRef()와 let의 가장 큰 차이점은 리렌더링 시의 동작방식입니다.
let으로 선언한 변수는 컴포넌트가 리렌더링될 때마다 초기화되어서 이전 값을 잃어버리는 반면, useRef()로 만든 변수는 리렌더링되어도 값이 유지됩니다. 더불어 useRef()는 useState()와 다르게 상태 값이 변경되어도 컴포넌트가 리렌더링이 유발되지 않는다는 특징이 있습니다.
실제 사용 사례를 보면, useRef()는 주로 DOM 요소에 접근할 때 사용합니다. 예를 들어 input에 focus를 주거나 스크롤 위치를 조정하는 경우에 ref를 활용합니다.
그리고 useRef()는 setTimeout()이나 setInterval()의 ID를 저장할 때도 유용합니다. 컴포넌트가 리렌더링되어도 타이머 ID가 유지되어야 cleanup 함수에서 해당 값을 이용하여 타이머를 정리할 수 있기 때문입니다.
컴포넌트 외부에서 let을 선언하면 리렌더링에 영향을 안 받지 않나요? 🤔
맞는 말씀입니다. 컴포넌트 외부에서 선언된 let 변수는 리렌더링의 영향을 받지 않습니다. 하지만 이런 방식은 권장되지 않는 패턴입니다.
그 이유는 크게 세 가지를 들 수 있는데요.
첫째, 컴포넌트 외부의 변수는 모든 컴포넌트 인스턴스가 공유하게 됩니다. 즉, 같은 컴포넌트를 여러 번 사용할 때 예상치 못한 동작이 발생할 수 있습니다.
둘째, 전역 변수처럼 동작하기 때문에 코드의 예측 가능성과 유지보수성이 떨어집니다.
셋째, 리액트의 원칙 중 하나인 단방향 데이터 흐름에 위배됩니다. 상태 관리가 리액트의 생명주기 밖에서 이루어지기 때문입니다.
따라서 컴포넌트의 상태를 관리할 때는 useState()나 useRef()와 같은 리액트에서 제공하는 공식적인 방법을 사용하는 것이 좋습니다.