React Hook's useState

 

 

   Reack Hook useState 함수

컴포넌트가 렌더링 될 때 const 가 재할당되는것 처럼 보이지만

실제로는 useState 함수에서 초기 여부를 검사하여 전역적으로 setter에 값을 유지한다

 

아주 간단한 예제인 카운터를 들어보면

 

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

 

아래 부분을 보면 const 로 할당하고 있는데, 어떻게 setNumber를 통해서 계속 number의 값이 바뀌는지

 

궁금할 수 있다.

 

const [number, setNumber] = useState(0);

 

실제로 리액트에서 컴포넌트가 렌더링되면 const를 재사용하는 것이 아니라 함수(컴포넌트)를 다시 호출하기 때문에

 

아래처럼 동작하게 된다.

 

실제로 Hook은 훨씬 정교하며 이와 같이 구현되지는 않지만 비슷한 동작을 보여주기위해서 개념을 설명하면

 

다음과 같이 이해하면 된다.

 

let _state;
let _initialized = false;
function useState(initialValue) {
  if (!_initialized) {
    _state = initialValue;
    _initialized = true;
  }
  return [_state, v => _state = v];
}

function Component() {
  const [count, setCount] = useState(0);

  console.log(count);
  setCount(count + 1);
}

Component();
Component(); // in reality `setCount` somehow triggers a rerender, calling Component again
Component(); // another rerender

 

 

 

 

 

 

 

source) https://stackoverflow.com/questions/58860021/why-react-hook-usestate-uses-const-and-not-let