[React] useRef 와 useState 개념, 차이

 전에 정리하려고 했던 useRef(), useState() 차이를 설명해보겠습니다.

 

✔ 개념

useState( ) 란?

const [state, setState] = useState(initialState);

상태 유지 값(state) 과 그 값을 갱신하는 함수(setState) 를 반환합니다.

setState 함수는 state 를 갱신할 때 사용합니다.

initialState 인자는 초기 렌더링 시에 사용하는 state입니다. 그 이후의 렌더링 시에는 이 값은 무시됩니다. 

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

// 예시

const [state, setState] = useState(무거운작업)

useState(()=>{무거운작업}) // 콜백형태

초기 값을 가져올 때 무거운 작업일 경우 콜백 형식으로 넣어주어 초기 렌더링 시에만 무거운작업이 한번만 실행됩니다.

 

useRef( )란?

const refContainer = useRef(initialValue) // initialValue 는 아무 값이나 가능
console.log(ref) // {current: initialValue}

본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.

useRef는 내용이 변경될 때 그것을 알려주지는 않는다는 것을 유념하세요. .current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지는 않습니다. 

 

useRef 는 값이 변경되어도 컴포넌트가 렌더링 되지 않는다. 또한, 컴포넌트가 렌더링 되어도 컴포넌트가 언마운트 되기 전까지는

값을 유지한다.

 

 

✔ 차이 

useState : state update -> 렌더링

값이 변할 때 마다 함수 전체가 렌더링된다.

 

useRef : ref update -> 렌더링 x

내부적으로는 값이 변한다. 따라서 컴포넌트가 렌더링 되기 전까지는 변경된 값이 보이지 않다가 렌더링 되는 시점에는 변경 된 값이 나온다.

 

 

✔ 참고

https://ko.reactjs.org/docs/hooks-reference.html#useref