useRef()
React컴포넌트는 기본적으로 state가 setState될때마다 렌더링이 된다. useRef()는 현재 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 현재 속성에 할당한다. 이 현재 속성은 값을 변경해도 state를 변경할 때 처럼 React컴포넌트가 다시 랜더링되지 않는다.
useRef()는 함수형 컴포넌트에서 사용되며, createRef()는 클래스형 컴포넌트에서 사용된다.
특정 태그를 조작하기 위해 선택할 때 사용하는 도구로, 대표적인 예로는 input태그를 선택하여 커서를 깜빡이도록 하고 싶다면 useRef를 사용하여 input태그를 선택하고, focus() 기능을 활용하여 커서를 깜빡이도록 하면 된다.
useEffect()
React컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook으로, 컴포넌트가 그려진 이후에 실행되는 함수이다.
class형 컴포넌트에서 사용되던 componentDidMount(), componentDidUpdate(), componentWillUnmount()의 기능들을 사용할 수 있게 도와준다.
즉, class형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 해준다.
useEffect(function, deps)
function: 수행하고자 하는 작업,
deps: 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 혹은 빈 배열
useEffect()에서 setState를 사용할 수 있지만 가급적 피하는 것이 좋다.
useEffect()의 경우 컴포넌트가 그려진(마운트된) 이후에 실행되는 함수이다.
컴포넌트가 마운트가 된 이후에 setState를 적용하게 되면, state가 변경되고, 변경된 state로 컴포넌트가 리렌더(다시그려짐)가 되기 때문에 성능에 좋지 않다.
