[React] state Vs ref

 

React 에서의 state 와 ref 의 차이는 아래와 같습니다.

 

1) 

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

// 읽기
console.log(count);

// 쓰기
setCount(count + 1);

 

2) useState를 통한 상태 업데이트는 비동기적으로 처리된다는 뜻은 아래와 같습니다

• React는 성능 최적화를 위해 여러 상태 업데이트를 배치(batch)로 처리합니다.
• 이로 인해 상태 업데이트가 즉시 반영되지 않을 수 있습니다.
• 연속된 여러 업데이트는 하나의 리렌더링으로 통합될 수 있습니다.

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

  const handleClick = () => {
    setCount(count + 1); // 이전 값을 기반으로 업데이트 하려면  setCount(prevCount => prevCount + 1)
    setCount(count + 1);
    console.log(count); // 여전히 초기값을 출력합니다
  };

  return (
    <div>
      Count: {count}
      <button onClick={handleClick}>증가</button>
    </div>
  );
}

 

 

 

 

참조: https://www.freecodecamp.org/news/react-state-vs-ref-differences-and-use-cases/

React State vs Refs – Differences and Use Cases