React : state, useState

1. state란?

• React에서 앱의 유동적인 데이터를 다루기 위한 개체이다.
• 상태는 시간이 지나거나 사용자의 행동에 따라 계속 변하는 값이다. (쉽게말해 컴포넌트 내부에서 생성하고 변경 할 수 있는데이터. 지속적으로 변경이 일어나는 값을 관리하기 위해 사용된다.)
  
• 상태에 따라 다른 동작을 하기 때문에 React 애플리케이션에서 중요하다.
• 왜 사용할까?
  • state가 변경되면 React가 자동으로 컴포넌트를 재랜더링하기 때문이다.
  • 이 점이 일반 변수와 다른 핵심적인 차이점이다.

---

2. State의 특징

1. 독립적

   각 React 컴포넌트에 속해있고, 해당 컴포넌트 내부에서만 state에 접근하고 업데이트 할 수 있다.

   이로인해 다른 컴포넌트들과의 충돌없이 쉽게 컴포넌트를 재사용 할 수 있고, 상태가 변경된 컴포넌트만 리렌더링 되기 때문에 성능을 최적화 할 수 있다.

2. 불변성

   state를 직접적으로 수정할 수 없다.

   state가 업데이트 되면 리렌더링을 한다 하였는데, 이런 변화를 감지하기 위해 이전 state와 업데이트된 state를 참조비교하기 때문이다.

• 참조 비교란? 두 객체가 같은 메모리에 위치를 가리키고 있는지 확인하는 과정이다. 즉, 두 변수가 실제로 같은 배열을 참조하고 있는지를 비교하는것이지, 그 내용이 같은지를 비교하는것은 아니다.

  let array1 = [1, 2, 3];
  let array2 = [1, 2, 3];
  let array3 = array1;
  
  console.log(array1 === array2); // false, 같은 내용이지만 다른 메모리 위치 참조
  console.log(array1 === array3); // true, 동일한 메모리 위치 참조

React에서는 이러한 참조 비교의 특성을 이용해 컴포넌트의 리렌더링이 필요한지 판단한다. 그래서 불변성을 유지하며 상태를 업데이트 하는 것이 매우 중요하기 때문에 setState나 useState의 setter 함수를 통해 새로운 참조를 생성하여 React가 변경 사항을 감지할 수 있도록 한다.

---

3. state vs. props

• props :
  • 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 수단이다.
  • 읽기 전용이며 변경할 수 없다.
  • React는 단방향 데이터 흐름(부모 → 자식)을 가지므로, props는 데이터를 전달하기만 한다.
• state :
  • 특정 컴포넌트가 내부적으로 갖는 상태이다.
  • 컴포넌트 내부에서 선언되고, 내부에서만 값을 변경할 수 있다.
  • 컴포넌트의 동적인 데이터를 관리하는 역할을 한다.

---

4. 클래스형 컴포넌트에서의 state

사용방법 2가지

1. constructor
2. 클래스 내부에서 state 초기화

여기서 constructor는 클래스의 초기 설정을 담당하는 함수이다, React에서 컴포넌트를 만들 때 constructor를 사용하면, 컴포넌트가 생성될 때 state에 this.state로 상태를 저장할 수 있다. 그리고 컴포넌트의 가른 함수들이 이 state를 쓸 수 있게 this에 연결(bind)해준다.

constructor(props) {
  super(props);
  this.state = {
    message: '안녕하세요.',
  };
}

constructor를 사용할 때는 항상 부모 클래스의 constructor을 상속받기 위해 super(props)를 호출해야 한다.

• state는 클래스형 컴포넌트에서 this.state를 통해 선언된다.
• 상태를 변경할 때는 setState 메서드를 사용해야 한다.
  • 주의점:
    • this.state를 직접 변경하지 말아야 한다.
    • 항상 setState를 사용해야 React가 상태 변경을 감지할 수 있다.
  • setState는 비동기로 동작하므로, 이전 상태를 기반으로 다음 상태를 계산할 때는 함수 형태의 setState를 사용해야 한다.

---

번외 ) constructor (이거 사진으로 만들어서 )

함수에서의 state

import { useState } from "react"; // useState를 import한다.

export default function Greeting() {
  const [message, setMessage] = useState("안녕하세요.");

  return (
    <>
      <div>{message}</div> {/* message의 상태 값 보여주기 */}
      <button onClick={() => setMessage("안녕히가세요.")}>click</button>
      {/* 버튼 클릭 시 message 상태의 값을 '안녕히가세요'로 변경 */}
    </>
  );
}

클래스에서의state

import { Component } from "react";

export default class GreetingClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "안녕하세요.",
    };
  }

  render() {
    return (
      <>
        <div>{this.state.message}</div>
        <button
          onClick={() => {
            this.setState({ message: "안녕히가세요." });
          }}
        >
          click
        </button>
      </>
    );
  }
}

이 둘은 완전히 동일한 기능을 하지만 코드의 가독성 면에서 차이가 난다.

---

5. 함수형 컴포넌트에서의 state

• 원래 함수형 컴포넌트에는 상태 관리 기능이 없었다.
• React 16.8 버전 이후 useState 훅이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.

---

6. useState란?

• useState는 함수형 컴포넌트에서 상태를 관리하기 위해 사용하는 React 훅이다.
• useState 함수의 인자는 상태의 초기값이다.
• 초기값은 숫자, 문자열, 배열 등 어떠한 데이터 타입도 가능하다.

---

7. useState의 동작

• useState는 배열을 반환한다.
  - 첫 번째 요소 : 현재 상태 값 = 해당 state의 현재 값
  - 두 번째 요소 : 상태를 업데이트하는 setter 함수
  const [message, setMessage] = useState('');
  

여기서 message 는 현재상태, setMessage 는 setter함수, ‘ ’는 초기값을 나타낸다.

현재 상태의 값은 읽기 전용이므로 값을 확인하는 용도로 사용한다.

직접 수정이 불가능한 state를 setter 함수를 사용해 새로운 참조를 만들어 state의 상태를 업데이트하게 되고, 참조 비교를 통해 변경 사항을 감지하면 해당 컴포넌트가 리렌더링 된다.

useState 함수의 인자에는 상태의 초기값 → useState의 초기값은 값의 형태가 자유롭다. (문자열, 숫자, 배열 모두 가능)

( setter함수명은 state의 이름 앞에 set을 붙여 사용하기! )

예시:

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 상태 초기값: 0

  const increment = () => {
    setCount(count + 1); // 상태 증가
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}
export default Counter;

동작 설명:

1. useState(0)은 초기 상태 값으로 0을 설정한다.
2. count는 현재 상태 값이고, setCount는 상태를 업데이트하는 함수이다.
3. 버튼을 클릭하면 setCount를 호출하여 count 값을 1 증가시킨다.

---

8. useState의 특징

• 상태 변경 시 React는 해당 컴포넌트를 자동으로 재랜더링한다.
• 상태 변경은 항상 setter 함수를 통해 이루어져야 한다.
• useState를 사용하면 클래스형 컴포넌트 없이도 상태를 간단히 관리할 수 있다.

---

9. 정리

• state는 컴포넌트의 유동적인 데이터를 관리하기 위한 기능이다.
• 클래스형 컴포넌트에서는 this.state와 setState를 통해 상태를 관리한다.
• 함수형 컴포넌트에서는 useState를 통해 간단히 상태를 관리할 수 있다.
• React의 상태 관리 시스템은 UI를 데이터에 따라 동적으로 업데이트할 수 있도록 돕는다.

---