useState

김태완·2021년 12월 20일
0

React

목록 보기
4/24
post-thumbnail

useState가 무엇인지는 알지만, 동작원리에 대해서 좀더 깊게 고촬해봤다

useState구조

useState는 보통 아래처럼 구조분해(distrcuturing) 형식으로 선언한다. 이는 아래 예시처럼 두개의 쌍 형태로 state(==fruit), setState(==setFruit)형식으로 선언해준다고 생각하면된다


  const [fruit, setFruit] = useState('banana');
  
  var fruitStateVariable = useState('banana'); // 두 개의 아이템이 있는 쌍을 반환
  var fruit = fruitStateVariable[0]; // 첫 번째 아이템
  var setFruit = fruitStateVariable[1]; // 두 번째 아이템
  
  

useState특징

  1. setState시 해당 state가 들어간 컴포넌트는 렌더링이 된다
  2. 렌더링 전,후 상태값의 불변성이 유지가 된다
const [state, setState] = useState('');

state = "current"
prevState === currentState //true

setState('current')
prevState === currentState //false
profile
프론트엔드개발

0개의 댓글