useState에 대해 정리해보기

useState 

데이터 변경,비동기, if 분기 불가, 동기적 시행 가능

 

• 호출 → 즉시 UI 변경 X → 이벤트 핸들러에 스케쥴 등록 (함수가 끝나야 변경, 그 사이 변경 안됨)
• top level 에서만 사용 (if문, 분기 처리 등에서 useState() 사용 불가) → 리액트가 트리 이해 못 함. → 첫 로드에는 에러가 없지만 리랜더링시 에러 발생.
• 비동기
  • setState 여러번 호출해도 리랜더링 종료 후 한번만 바뀜 (중간에 콘솔 찍으면 변화가 없음)
  • 동기적으로 진행하고 싶다면 → setCount((like)=>like+1) (이전 값을 명시적으로 표현)
• useState의 초기화에 함수가 필요한 경우.

lazy 초기화 (function 사용)
  const [watched, setWatched] = useState(function () {
    const storedValue = localStorage.getItem("watched");
    return JSON.parse(storedValue);
  });

 

 

비동기라는게 중요

-> 한 함수 안에 여러번 써도 한번의 값만 완료 됨. 

-> 분기 처리로 hook을 쓰면 에러남.