[React] state 가뭐야?

0️⃣ 들어가며

React의 State(상태)는 React 컴포넌트 내에서 관리되는 데이터를 말해요.
이 데이터는 컴포넌트가 렌더링될 때 변경될 수 있으며, 이 변경은 화면에 표시되는 내용을 업데이트하는 데 사용됩니다.

State를 사용하면 React 앱의 상태를 추적하고 관리할 수 있습니다.
예를 들어, 사용자가 입력한 데이터를 저장하거나, 사용자 인터랙션에 응답하여 화면을 업데이트하거나, 외부 데이터를 가져와서 화면에 표시하는 등의 작업에 사용됩니다.

---

1️⃣ State(상태)란 무엇인가요?

위에서 말했듯 간단하게 말해 state는 각 컴포넌트내에서 관리되는 데이터를 말합니다
바로 예시를 통해서 state의 사용법을 알아봐요

import React, { useState } from "react";

const Counter = () => {
  // useState 훅을 사용하여 count 상태 변수와 그 상태를 변경할 수 있는 setCount 함수를 선언합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* 버튼을 클릭할 때마다 setCount 함수를 호출하여 count 상태를 변경합니다. */}
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Counter;

위 코드에서 useState 훅은 함수형 컴포넌트에서 state 를 사용할 수 있게 해줍니다.

useState(0)은 count라는 State 변수를 0으로 초기화합니다.
setCount 함수는 count의 값을 변경할 때 사용됩니다.

---

🫀 중요!! State의 변경원리

State를 변경하기 위해서는 오직 useState훅에서 제공하는 해당 State를 변경하는 함수를 호출해야 합니다.
위 예제에서는 setCount 함수를 사용하여 count State를 변경하고 있습니다.

💡 useState의 원리
useState는 배열 형태의 결과를 반환합니다.
이 배열의 첫 번째 요소는 상태 변수이고,
두 번째 요소는 이 상태를 변경하는 함수입니다.

이 함수를 호출하면 컴포넌트가 리렌더링되고, 상태 변수의 값이 변경됩니다.

// state가 상태변수자리, setState가 상태 변경 함수
const [state, setState] = useState(initialState);

• state: 상태 변수
• setState: 상태를 변경하는 함수
  
  🐸 : 위에서 state자리에 있는 변수는 우리가 일반적으로 변수 선언 하듯 선언하고자 하는 변수명으로 선언하면되요!! 보통은 아래와 같이
  [ 변수명, set+변수명 ] 조합으로 사용합니다

const [name, setName] = useState("eastZoo");
const [age, setAge] = useState(27);

🐸 : 뭐 근데 보통은 위와같이 쓴다는거고
아래와 같이 그냥 자리만 지키시면 규칙없이 아무렇게 네이밍하셔도 쓸수는 있죠~

const [name, changeNameFun] = useState("name")

🐸 : 중요한건 [ ] 대괄호 안에서 첫번째 자리에 선언된 변수가 state 변수이고
그 변수값을 변경할때는 두번째 자리에 있는 변경 함수를 통해서만 변경해야 한다는점!!

---

💡 setState 함수 사용팁!!

아래와 모두 기능은 똑같지만 다양하게 사용할 수 있습니다

setState 함수 안에서 state변수를 불러와서 값을 변경하거나 : setState(state + 1)
상태변경 함수 내부에서 값을 가져와 값을 변경하는 방법이 있어요 :
setCount((prev) => prev+1)과 같이

🚩 위와 같이 state 변수로 값을 변경하거나 prev로 값을 변경하는 방법의 차이는 존재합니다 그부분은 다른 포스팅에서 정리할게요!

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);
  
  const increment = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={() => setCount((prev) => prev + 1}>Click me</button>
      <button onClick={increment}>Click me</button>
    </div>
  );
};

export default Counter;

---

🍽️ useState의 초기값 예시

useState 훅을 사용할 때 상태 변수의 초기값으로는 모든 JavaScript 데이터 유형을 사용할 수 있습니다. 여기에는 숫자, 문자열, 배열, 객체, 불리언, 그리고 null과 undefined도 포함됩니다.

• 숫자

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0); // 숫자형 상태 변수

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Example;

• 문자열

import React, { useState } from 'react';

function Example() {
  const [name, setName] = useState(''); // 문자열 형태의 상태 변수

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Your name is: {name}</p>
    </div>
  );
}
export default Example;

• 배열

import React, { useState } from 'react';

function Example() {
  const [list, setList] = useState([]); // 배열 형태의 상태 변수

  const addItem = () => {
    setList([...list, 'New Item']);
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default Example;

• 객체

import React, { useState } from 'react';

function Example() {
  const [person, setPerson] = useState({ name: '', age: 0 }); // 객체 형태의 상태 변수

  const handleChange = (e) => {
    setPerson({
      ...person,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <div>
      <input
        type="text"
        name="name"
        value={person.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        type="number"
        name="age"
        value={person.age}
        onChange={handleChange}
        placeholder="Age"
      />
      <p>Name: {person.name}</p>
      <p>Age: {person.age}</p>
    </div>
  );
}

export default Example;

• 불리언

import React, { useState } from 'react';

function Example() {
  const [isOn, setIsOn] = useState(false); // 불리언 형태의 상태 변수

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  return (
    <div>
      <button onClick={toggleSwitch}>
        {isOn ? 'Turn off' : 'Turn on'}
      </button>
      <p>The switch is {isOn ? 'on' : 'off'}</p>
    </div>
  );
}

export default Example;

• null 또는 undefined

import React, { useState } from 'react';

function Example() {
  const [value, setValue] = useState(null); // null 또는 undefined 형태의 상태 변수

  const updateValue = () => {
    setValue('New Value');
  };

  return (
    <div>
      <button onClick={updateValue}>Update Value</button>
      <p>Value: {value}</p>
    </div>
  );
}

export default Example;

---

2️⃣ useState 변수를 사용해야하는 이유

1. 리렌더링을 트리거하기 위한 업데이트 알림

useState를 사용하면 상태(State)를 업데이트할 때 React에게 해당 컴포넌트를 리렌더링해야 함을 알릴 수 있어요.
일반 자바스크립트 변수를 사용하면 React는 상태 변화를 감지하지 못하고, 컴포넌트를 리렌더링( 다시그리기 )하지 않아요
( 컴포넌트 리렌더링을 하지 않으면 변경사항이 UI에 적용되지 않겠죠)

💡 바로 예를 보며 이해해볼까요,!!

폴더구조따라 똑같이 구현해보세요!!

🗂️ 예시 폴더구조

 ┣ 📂components
 ┃ ┣ 📜counter.jsx
 ┃ ┗ 📜counterError.jsx
 ┣ 📜App.css
 ┣ 📜App.jsx
 ┣ 📜index.css
 ┗ 📜index.jsx

• 메인컴포넌트 App.jsx

import "./App.css";
import Counter from "./components/counter";
import CounterError from "./components/counterError";

function App() {
  return (
    <div className="App">
      <Counter />
      <CounterError />
    </div>
  );
}

export default App;

다음과 같이 일반 자바스크립트 변수를 사용하면 컴포넌트가 리렌더링되지 않습니다.

function CounterError() {
  
  let count = 0;
  const increment = () => {
    count += 1; // 일반 변수를 직접 수정
    console.log(count); // 값은 업데이트 되지만 화면은 업데이트 되지 않음
  };
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}
export default Counter;

하지만 아래와 같이 useState를 사용하면 상태를 업데이트할 때 React가 컴포넌트를 리렌더링하고 화면을 업데이트할 수 있습니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1); // useState를 사용하여 상태를 업데이트
    console.log(count); // 값과 화면 모두 업데이트됨
  };
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}
export default Counter;

2. 성능 최적화

React는 상태(State)의 변경을 추적하여 변경된 부분만 업데이트합니다.
useState를 사용하면 React가 상태 변경을 더 효율적으로 추적하고, 필요한 경우에만 리렌더링을 수행하여 성능을 최적화할 수 있습니다.

🐸 : 이외에도 여러 이유가 있지만 크게 위의 두가지로 생각하고 있으면 좋을 것같아요!
이렇게 useState를 사용하는 것은 React의 상태 관리와 성능 최적화에 매우 중요합니다.
따라서 React 애플리케이션을 개발할 때는 useState를 사용하여 상태를 관리하는 것이 좋습니다.

---

✅ useState 함수의 변수관리는 const??

const 변수는 값을 한번 지정하면 절대 변하지 않는 값인 상수 이다
하지만 useState를 통한 상태관리시 변수값이 계속 바뀌는데도 불구하고 const 상수를 사용한다.
왜 상수형을 사용하는 걸까?

우리가 기억해야 할 것은
리액트는 우리 눈에 보이는 [state, setState] 와 useState 사이에 있는

등호 연산자( = )를 사용해서 값을 할당하고 있지 않는다는 것이다.
대신 state를 업데이트하는 이 함수( setState 이다 )를 호출하고

구체적인 값의 변경은 리액트에 의해 어딘가에서 관리되는 것이다.

리액트의 어딘가에 대해서는 공식 문서를 찾아보자
https://reactjs.org/docs/state-and-lifecycle.html

useState를 호출해서 리액트에게 어떤 값을 관리해야 한다고 선언하고 변수 자체를 볼 수는 없고
함수만 호출합니다 그리고 절대 등호 연산자로 title에 새로운 값을 할당하지 않는 리액트만의 법칙이기에 그래서 상수형을 써도 상관 없는 것이죠.

끝🙋🏻

💬 : 위 내용에대해 더 궁금한점이 있거나,
틀린내용이 있거나
질문이 있다면 댓글로 달아주세요.!