useRef vs let

리액트에서 변수를 관리할 때 useRef를 사용하는 것과 let을 사용하는 것은 어떤 차이가 있나?

useRef()와 let의 가장 큰 차이점 : 리렌더링 시의 동작 방식

- let으로 선언한 변수는 컴포넌트가 리렌더링될 때마다 초기화되어서 이전 값을 잃어버리는 반면 useRef()로 만든 변수는 리렌더링되어도 값이 유지됨. 

useRef()는 useState()와 다르게 상태 값이 변경되어도 컴포넌트가 리렌더링이 유발되지 않음.

 

** 실제로 useRef()는 주로 DOM요소에 접근할 때 사용함. 

ex. input에 focus를 주거나 스크롤 위치를 조정하는 경우에 ref를 활용. setTimeout()이나 setInterval()의 ID를 저장할때도 활용.

컴포넌트가 리렌더링되어도 타이머 ID가 유지되어야 cleanup함수에서 해당 값을 이용하여 타이머를 정리할 수 있기 때문

 

컴포넌트 외부에서 let을 선언하면 리렌더링에 영향을 받나요?

-> 받지 않음. 컴포넌트 외부에서 선언된 let변수는 리렌더링의 영향을 받지 않지만 권장되지 않는 패턴임.

1. 컴포넌트 외부의 변수는 모든 컴포넌트 인스턴스가 공유하게됨.

=> 즉 같은 컴포넌트를 여러 번 사용할 때 예상치 못한 동작이 발생할 수 있음

2. 전역 변수처럼 동작하기 때문에 코드의 예측 가능성과 유지보수성이 떨어짐.

3. 리액트의 원칙 중 하나인 단방향 데이터 흐름이 위배됨.

=> 상태 관리가 리액트의 생명주기 밖에서 이루어지기 때문

 

따라서 컴포넌트의 상태를 관리할 때는 useStae()나 useRef()와 같은 공식적인 방법을 사용하는 것 권장.