리액트 State(상태)란? 💼

안녕하세요~ 날씨가 점점 추워지는 것 같죠? 여러분들도 몸살 감기 조심하세요. 😷😷 그럼 시작하겠습니다.

이번에는 리액트에서 중요한 State에 대해 알아보겠습니다. 
리액트에서 State란?
컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용하는 것을 말합니다. 쉽게 말해, 컴포넌트가 어떤 모습을 보여줄지 결정하는 데이터라고 생각하면 됩니다. 

그럼 왜 ❓❓ State를 사용해는지 궁금증이 있으실 겁니다.
이런 궁금증을 해결하기 위해 제가 생각해본 결과
일반적으로 변수에 할당된 값이 변경되면  렌더링시 html에 자동으로 반영이 되지않아, 직접 코드를 작업해서 해야하지만, state는 html 이 자동으로 재렌더링 되기 때문에 동적인 화면을 구현할 수 있기 때문에 사용합니다. 
이러한  이유로 사용된다고 생각합니다. 

그럼 언제 State를 사용할까요? 
사용자의 상호작용에 따라 화면이 변화하거나, 시간이 지남에 따라 데이터가 변경되는 모든 경우에 상태를 사용할 수 있습니다.

다음은 리액트의 특징 3가지 입니다.

 

1️⃣State 값이 변경되면 자동으로 컴포넌트를 재렌더링하여 화면을 업데이트합니다.
2️⃣직접 수정하지 않고 setState 함수를 통해서만 값을 변경할 수 있으며, 불변성을 유지합니다.
3️⃣컴포넌트의 동적인 데이터를 관리하고, UI와 데이터의 동기화를 쉽게 만들어줍니다.

 

마지막으로 리액트 State 사용 예제 코드를 설명하면서 마무리 하도록 하겠습니다. 
다음코드는 가장 기본이 될 수 있는 State 예시 코드입니다.

 

import React, { useState } from 'react';

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

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

다음 코드에서는 useState 훅을 사용하여 count라는 상태를 만들고, 초기값을 0으로 설정합니다. 그리고 버튼을 클릭할 때마다 setCount 함수를 호출하여 count 상태를 1씩 증가시키고, 화면에 표시되는 값이 자동으로 렌더링될 수 있도록 합니다.

이상입니다!!!  피드백 댓글 및 좋아요 부탁드립니다~ 모두들 감기 조심하세요~