TIL. useState vs useRef
useState와 useRef의 공통점
useState와 useRef의 기능상의 공통점은 함수형 컴포넌트에서 동적으로 상태 관리
를 할 수 있게 해준다는 점이다.
예시로, 버튼이 클릭되었을 때 주어진 state를 Human!이라는 string으로 변환하는 동일한 프로그램을 useState와 useRef를 통해 아래와 같이 다르게 구현할 수 있다.
import React,{useState} from 'react';
const Test=()=>{
const [letter,setLetter]=useState('');
const onClick=()=>{
setLetter('Human!');
};
return(
<div>
<button onClick={onClick}>Human?</button>
<b>{letter}</b>
</div>
);
};
export default Test;
import React,{useRef} from 'react';
const Test2=()=>{
letter.current='Human!';
console.log(letter.current);
};
return(
<div>
<button onClick={onClick}>Human?</button>
);
};
export default Test2;
useState와 useRef 모두 주어진 state를 변화시킬 수 있다.
"왜 useState 구현에서는 Human!이라는 글씨를 화면에 띄워서 값이 변한 것을 확인했는데, useRef의 구현에서는 console에 log를 찍어 확인할까?"
useState와 useRef의 차이점
useRef를 사용한 구현에서 글씨를 화면에 띄우지 않은 것은 useState와는 다르게 useRef
는 state를 변화시킨 후에 component를 re-render하지 않는다
즉, useRef를 사용한 구현에서 state를 변화시키더라도 변화 후에 re-render되지 않아 initial value로 나타날 것이기에 rendering을 할 수는 있지만 변화했다는 의미가 존재하지 않아 따로 화면에 띄우지 않은 것이다.
그러나, useState
는 업데이트되면 re-rendering process
가 진행된다.
각각의 state에서 이용할 hook을 설계할 때,
주로 state의 rendering여부를 바탕으로 결정하는 것이 좋다.
Rendering이 필요한 state는useState
를 이용하는 것이 간편하게 상태관리를 할 수 있고, rendering이 필요하지 않은 state의 경우useRef
를 쓰는 것이 간편하게 코드를 작성할 수 있다
참고:https://medium.com/humanscape-tech/react-usestate-vs-useref-4c20713f7ef
Author And Source
이 문제에 관하여(TIL. useState vs useRef), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chloeee/TIL.-useState-vs-useRef저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)