왜, ref에 데이터를 넣어야 하나요? 그냥 변수를 사용하면 안되나요?

회사에서 진행중인 ReactJS 스터디중 ref 관련 진행시 동료 한분이
“왜, ref에 데이터를 넣어야 하나요? 그냥 변수를 사용하면 안되나요?” 라는 의견을 주셨습니다.

저도 변수에 데이터를 담아서 사용했던 경험이 있어서 이유를 찾아보고 예제를 만들어 보았습니다.

아래와 같이 4종류의 변수 타입을 만들었습니다.

• state : useState 를 사용
• ref : useRef 를 사용
• local : 컴포넌트 내에 변수 사용
• global : 컴포넌트 밖에 변수 사용

해당 변수에 값을 변경하고 리랜더링 해보고 언마운트를 해봤을때 다음과 같은 결과를 얻었습니다.

• 리랜더링시 데이터 유지 : state, ref, outside
• 언 마운트시 데이터 유지 : outside

결론 : 컴포넌트의 라이프사이클에서 안전하게 동작하는 것은 state와 ref입니다.

코드 확인하기