[react] 리액트에서 상태에 대한 정리(1) - 상태

- 본인이 이해한 react의 state에 대하여 정리한 글 입니다. -

 

리액트에서 상태(state)와 상태관리(state management)

리액트에서 상태란 컴포넌트 별로 기억해야하는 데이터이다. 이 데이터는 이미지도 될 수 있고, 고객이 장바구니에 담아둔 물품정보 일수도 있다. 즉, 리액트에서 상태관리란 이러한 데이터를 효율적으로 관리하는 것이라 이해할 수 있다.

 

컴포넌트 간에 데이터를 전달하는 방법과 업데이트하는 방식을 간소화하고, 어플리케이션의 상태를 일관성있게 유지하는 모든 것이 상태관리라고 볼 수 있다.

 

리액트에서 상태는 스냅샷으로 관리된다.

앞서 정리한 상태를 다시 정리해보면 상태는 스냅샷으로 관리된다. 풀어서 설명하자면, 상태는 카메라로 찍은 사진처럼 보관(-> 리액트의 특정한 메모리 공간) 되어 있다가 상태(데이터)가 변경되면, 리렌더링이 촉발하게 되고,  잠시 동안 보관된 상태는 버려지고, 새로운 상태가 스냅샷되어 관리된다.

 

쉽게 설명하자면,  기존 사진과 새로운 사진을 비교해서 차이가 존재한다면 새로운 사진으로 대체하고, 차이점이 없다면, 기존 사진을 그대로 사용하는 것과 같다.

 

정리하자면,  리렌더링이 된 이후에 상태는 변경 사항이 존재하는 경우에만 새로운 값으로 대체되고,  그게 아니라면 기존 상태를 유지한다.  

 

이벤트 핸들러 내에서 상태의 변경

참고로, 이벤트 핸들러 내에서 setState() 를 여러 번 호출해도, 한 번 호출한 것과 동일한 동작을 수행한다. 이는 리액트가 이벤트 핸들러 내의 모든 로직이 처리된 이후에  이를 반영하기 위해서 리렌더링을 한 번만 실행하기 때문이다. 

따라서 , onClick 과 같은 이벤트 헨들러 내에서 setState 를 여러번 호출하여 값을 변경하더라도, state는 변경되기 전의 상태를 가지고 있으므로,  console.log(state) 를 해보면 변경된 값이 아닌 기존 값이 출력되는 것이다

 

이러한 특성은 setTimeOut 과 같은 비동기적 로직이 포함되어 있어도 동일하게 작용한다. 

import React, { useState } from 'react';

function Counter() {
  // useState 훅을 사용하여 초기 상태를 정의
  const [count, setCount] = useState(0);

  const increment = () => {
    // 현재 상태의 복사본을 만들고 복사본을 수정하여 새로운 상태를 생성
    setCount(count+5);
    
    console.log(count) // 0
    // 비동기적으로 실행되어도 동일하게 0 를 출력
    setTimeout(()=>{
     console.log(count) // 0
    },3000)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;