React(리액트)의 useState를 공부하자! 기초니까!

오늘은 리액트의 useState에 대해서 알아보고자 한다.

완전 기초이지만 완전 중요한 상태관리 그 중에서도 잘 이해하고 넘어가야 하는 useState를 공부해보자

---

useState

리액트에서 상태 관리를 위해 사용되는 Hook 중 하나로써

프론트엔드에서 상태관리는 매우 중요하다.

그 상태관리를 위해 useState를 사용함으로써 함수 컴포넌트 내에서 상태를 가지고 활용하게 된다.

 

useState의 기본 사용법

// 새로운 상태 변수를 선언하고. "count"라는 이름의 상태 변수를 0으로 초기화하기
const [count, setCount] = useState(0);

 

useState는 두 가지를 반환하는데

1. 상태 값(count)
2. 이 상태를 설정할 수 있는 함수(setCount)
3. (네이밍은 아무렇게나 해도 상관없지만 [상태값, set상태값]=useState(초기화 값)으로 표현)

useState의 동작 원리
useState는 리액트에게 여기 컴포넌트는 이 상태를 가지고 있어~ 라고 알림

리액트는 이 상태를 메모리에 저장하고, 상태를 업데이트할 때,
리액트는 새로운 상태 값과 함께 컴포넌트를 다시 렌더링함 

useState의 렌더링
useState를 사용하여 상태를 업데이트하면, 리액트는 컴포넌트 함수를 다시 실행하여 가상 DOM을 업데이트.

그런 다음에, 리액트는 이전의 가상 DOM과 새로운 가상 DOM을 비교하여,

실제 DOM에 필요한 최소한의 변경만을 적용(블로그에 리액트 동작방식에 적혀있어요!)

useState를 쓰면서 주의할 점!!!
현재 상태에 기반하여 상태를 업데이트해야 할 경우, setCount와 같은 세터 함수에 함수를 전달해야 한다.
useState를 사용할 때 객체를 상태로 관리하고 있다면 객체를 업데이트할 때 전체 객체를 전달해한다.!!!

function UserInfo() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  // 객체 전체를 업데이트하지 않고, 특정 필드만 업데이트
  const updateAge = () => {
    setUser(prevUser => ({
      ...prevUser,
      age: prevUser.age + 1
    }));
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={updateAge}>Age +1</button>
    </div>
  );
}

 

객체의 특정 필드만 업데이트하기 위해 스프레드 연산자(`...`)를 사용하여 기존 상태를 복사하고,

필요한 필드만 변경해서 새로운 객체를 상태 설정 함수에 전달하는 방식이다.

---

만약 useState를 사용하지 않는다면 여러가지 문제점이 있다.

1. 함수 컴포넌트에서 상태 관리가 불가능해진다.
   1. 함수 컴포넌트는 기본적으로 상태 관리를 위한 메커니즘을 제공하지 않는다.
   2. 함수 컴포넌트의 장점을 살리지 못하고, 클래스 컴포넌트로 돌아가야 하는 상황이 된다
2. 클래스형 컴포넌트의 복잡성
   1. 클래스형 컴포넌트에서는 this 키워드를 사용하여 상태와 메서드에 접근해야 하는데
   2. JavaScript의 this 바인딩 규칙을 잘 이해하지 못한 경우, 오류가 발생할 수 있다.(생각보다 어렵거든요...)
   3. 클래스형 컴포넌트는 함수형 컴포넌트에 비해 더 길고 복잡한 코드 구조를 가질 수 있어, 가독성이 안좋다. 매우!
3. 선언적 프로그래밍의 장점 상실
   1. 리액트는 선언적 프로그래밍 방식을 지향하고
   2. useState를 사용하면 상태가 변화할 때마다 리액트가 자동으로 UI를 업데이트하여 최신 상태를 반영
   3. 그러나 useState를 사용하지 않으면, 개발자가 직접 DOM을 조작하거나,
   4. 상태 변경을 반영하는 로직을 작성해야 하므로, 선언적 프로그래밍의 장점을 상실하게 된다.
4.  코드 유지보수의 어려움
   1. useState를 사용하지 않는 경우, 상태 관리 로직이 분산되고 일관성이 떨어질 수 있다
   2. 코드의 유지보수성을 떨어뜨리고, 버그를 발생시키기 쉬운 환경을 조성할 수 있다.

---

그러니까 useState 쓰자 계속 공부할 기초에서 커스텀 훅도 나올 것이고 다양한 방법으로 상태를 관리하는 방법이 나오게 될테니 기본은 알고 써야 할 것 아닌가!

 

ps) let이나 const로 값을 바꿔서 동적으로 만든다고 하더라도 리렌더링이 되지 않기 떄문에 useState쓰셔야 해요!