[React] useState, useRef 차이

리액트 클론코딩을 하다가 문득 useState , useRef의 차이점에 대해서 궁금해져서 기록해둔다

 

1. useState와 useRef의 차이

1) useState

- useState를 사용하면 해당 state값이 업데이트되면 컴포넌트 return아래가 rerender가 발생하는데
- 예를들어 const [id, setId ]= useState("") 이렇게 id를 state로 지정하면
 해당 인풋에서 글자하나를 입력할때마다 rerender가 발생한다.

 

2) useRef

- 이렇게 하면 성능에 좋지 않으므로 useRef를 이용할 수 있다.
- useRef로 DOM요소에 접근도 가능하다.
- useRef는 값을 변경해도 render부분이 다시실행되지않는데 즉 값이 변경되어도 다시 렌더링이 일어나지 않아도 되는 값들은 useRef를 사용하면 된다.
- const inputRef = useRef(); 이런 식으로 변수에 useRef를 할당하고 ref를 이용하고 싶은 태그 에다가
ref={inputRef} 이렇게 넣어 주면 된다.
- 그리고 해당 inputRef의 value에 접근 하고 싶다면  
const value = inputRef.current.value; current를 이용해준다