공식문서 읽고 기록 남기기
몰랐거나 확실하지 않았던 개념 기록하기

React.Hook

State Hooks

• useReducer 직접적으로 데이터를 수정하지 말고 불변성을 유지하기
• useState

• set 함수를 호출해도 이미 실행 중인 코드의 현재 상태는 변경 되지 않습니다.
• 다음 useState 렌더링부터 반환되는 항목에만 영향을 미칩니다. (이는 오직 다음 렌더링이 시작 할 때 영향을 미칠 것입니다.)

useState를 사용하다보면 함수 내부 로직에서 state가 반영되지않아 렌더링 되지 않은 듯한 문제를 겪어본적이 있습니다

예시 문제 : state가 스냅샷처럼 작동

function handleClick() {

  console.log(count);  // 0

  setCount(count + 1); // Request a re-render with 1
  console.log(count);  // Still 0!

  setTimeout(() => {
    console.log(count); // Also 0!
  }, 5000);
}

해결 : 변수에 담기

const nextCount = count + 1;
setCount(nextCount);

console.log(count);     // 0
console.log(nextCount); // 1

예시 문제

function handleClick() {
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
}

해결

function handleClick() {
  setAge(a => a + 1); // setAge(42 => 43)
  setAge(a => a + 1); // setAge(43 => 44)
  setAge(a => a + 1); // setAge(44 => 45)
}