[React🩵] useState

01.  useState란?

React 컴포넌트에서 상태 관리하는 Hook
함수형 컴포넌트에서 상태를 사용할 수 있게 도와준다

 

 

 

02.  기본 문법

const [state, setState] = useState(initialValue);

• state → 현재 상태 값
• setState → 상태를 업데이트하는 함수
• initialValue → 상태 초기 값

 

 

 

03.  사용법

3-1.  기본 사용법

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const handleButton = () => setCount(count + 1)

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

export default Counter;

 

 

3-2.  응용 활용법 - 객체 상태 업데이트

function UserProfile() {  
  const [user, setUser] = useState({ name: "르탄이", age: 25 });  // 객체 상태
  
  const changeName = () => {  
    setUser((prevUser) => ({ ...prevUser, name: "르순이" }));  
  };  

  return (  
    <div>  
      <p>이름: {user.name}</p>  
      <p>나이: {user.age}</p>  
      <button onClick={changeName}>이름 변경</button>  
    </div>  
  );  
}

name만 변경하고 나머지 속성은 유지하기 위해 spread 연산자(....) 사용 (속성 복사)

 

 

3-3.  응용 활용법 - 사용자가 입력한 값을 받아 동적 업데이트

const handleChange = (event) => {
  setUser((prevUser) => ({ ...prevUser, name: event.target.value }));
};

return <input type="text" value={user.name} onChange={handleChange} />;

다른 속성은 유지하고 오로지 name만을 입력받아 업데이트

 

 

 

04.  불변성

불변성이란 메모리에 있는 값을 변경할 수 없는 상태를 말한다
js의 데이터 형태 중 원시데이터가 불변성이 있고 그 외(객체, 배열, 함수)는 불변성이 없다

 

데이터 구조를 직접 변경하면 불변성을 깨트리게 된다

불변성을 깨트리게 되는 것은 예측 불가능한 코드를 만들고, 버그 추적이 어려워진다는 문제가 있다

 

⭐️⭐️⭐️ 중요 ⭐️⭐️⭐️
리액트에서 화면을 리렌더링 할지 말지 결정할 때는 state의 변화를 확인한다.
state의 변화 여부 확인은 변화 전과 후의 메모리 주소를 비교하게 되는데, 데이터 수정 시 불변성을 지키지 않고 직접 수정을 하게 되면 값은 바뀌지만 메모리 주소는 변하지 않게 되고 state의 변화를 관찰하지 못하게 된다.
따라서, 상태를 변경할 때는 항상 새로운 객체를 만들어야 React가 변경을 감지할 수 있다!

 

 

4-1.  불변성을 지키지 않은 코드

let num = [1, 2, 3];
num.push(4);

기존 num 배열 자체를 변경하여 불변성을 깨드린다

 

 

4-2.  불변성을 유지하는 코드

let num = [1, 2, 3];
let newNum = [...num, 4];

불변성을 지키기 위하여 기존 배열을 복사하여 (...num) 새로운 배열을 생성한다

 

 

 

🔥  정리

• React의 useState에서 객체를 관리할 때는 불변성을 유지해야 함
• 기존 객체를 직접 수정하지 말고, spread 연산자(...)를 이용하여 새로운 객체를 생성해야 함
• setState의 업데이트 함수에서 이전 상태(prevState)를 받아 새로운 상태를 반환하면 더 안전함
• 여러 속성을 한 번에 변경할 수도 있고, 사용자 입력을 받아 동적 업데이트도 가능하다
• 상태를 변경할 때는 항상 새로운 객체를 만들어야 React가 변경을 감지할 수 있다!