[React] 리액트 스테이트

State

---

State는 React 컴포넌트 내에서 변경 가능한 데이터를 관리하는 객체입니다. 

쉽게 말해, 컴포넌트의 "기억 장치" 역할을 하며 사용자 상호작용이나 네트워크 응답 등에 따라 변할 수 있는 값들을 저장합니다.

---

---

State의 특징

---

 

변경 시 자동 렌더링: 

State가 변경되면 React는 해당 컴포넌트를 자동으로 다시 렌더링합니다. 

이것이 일반 변수와의 가장 큰 차이점입니다. 

컴포넌트 내부에서 관리:

State는 해당 컴포넌트 내에서만 직접 접근하고 수정할 수 있습니다.

불변성(Immutability): 

State는 직접 수정하지 않고, 항상 setState 함수나 useState의 setter 함수를 통해 업데이트해야 합니다.

---

---

State 사용 방법

---

함수형 컴포넌트에서 (Hooks 사용)

import React, { useState } from 'react';

function Counter() {
  // [현재 상태 값, 상태를 업데이트하는 함수] = useState(초기값)
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

 

jsx

---

---

State를 사용하는 이유

---

일반 변수는 값이 변경되어도 화면이 자동으로 업데이트되지 않습니다. 

아래 예시처럼 일반 변수를 사용하면 값은 변경되지만 화면에는 반영되지 않습니다. 

const Counter = () => {
  let count = 0;  // 일반 변수
  
  const plus = () => {
    count = count + 1;
    console.log(count);  // 값은 증가하지만 화면에는 반영되지 않음
  }
  
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={plus}>+</button>
    </div>
  );
}

 

jsx

State를 사용하면 값이 변경될 때마다 컴포넌트가 자동으로 다시 렌더링되어 화면에 최신 상태가 반영됩니다. 

---

---

결론

---

React에서 State는 동적인 데이터를 관리하고 UI를 업데이트하는 핵심 메커니즘입니다. 

사용자 입력, 서버 응답 등에 따라 변경되는 데이터는 State에 저장하고, State 변경 함수를 통해 업데이트하면 자동으로 화면에 반영됩니다.

---

---

추가 설명

---

프롭은 프로퍼티를 뜻합니다.

프롭을 입력받은 펑션을 실행해서 데이터가 갱신되면 리턴하면 새로운 데이터를 가진 유아이가 됩니다.

스테이트도 마찬가지 입니다.

---

스테이트 기본형

const [name, setName] = useState('data');

name, setName 은 개발자가 지정할 수 있습니다.

---

스테이트는 어레이를 리턴합니다.

어레이 인덱스 0은 현재의 밸류를 읽는 데이터 입니다.

어레이 인덱스 1은 현재의 상태를 변경하는 펑션입니다.

표기법은 보통 이렇게 씁니다.

인덱스 0 - 현재 상태 name

인덱스 1 - 바뀐것 setName

---