useRef의 ref란 reference 즉, 참조를 말하는 것으로 특정한 DOM요소에 접근할 수 있는 리액트 훅을 말합니다.
useRef를 변수에 저장하고 ref = 변수명으로 저장한다면, 컴포넌트의 전생애주기를 통해 유지되는 useRef 속성을 이용해
컴포넌트가 계속 렌더링 돼도 컴포넌트가 언마운트 될 때 까지 그 값을 유지합니다. 또한 값이 변경되어도 컴포넌트가 재렌더링 되지 않습니다.
사용 이유는 변화는 감지해야 하지만 렌더링을 발생시키지 않게 하고자 할 때 사용합니다.
useEffect는 함수형 컴포넌트에서 데이터 가져오기, 수동 DOM 조작 등 side effect를 수행하기 이용되는 Hook입니다.
useEffect는 effect 함수와 dependency array , 즉 2개의 인자를 받습니다.
실행 순서는 컴포넌트가 렌더링 될 때 useEffect 내부 함수가 실행되고, 의존성 배열과 비교하여 변화된 값이 있다면 다시 내부 함수가 실행됩니다.
내부에 cleanup 함수가 존재한다면 마지막으로 clenaup를 실행하여 내부 함수 로직을 정리하게 됩니다.