React : UseState

UseState 란?

• React 에서 데이터의 상태를 관리하기 위한 객체
• 컴포넌트의 동작과 화면에 표시되는 데이터를 동적으로 업데이트 할 수 있게 함.

 

State의 특징

• 내부적으로 관리 : 컴포넌트 내부에서 생성 및 관리되며, 다른 컴포넌트에서 접근 불가능
• 동적 업데이트 : State 값이 변경되면 해당 컴포넌트 -> 하위 컴포넌트들이 자동으로 리렌더링
• 불변성 : 직접 수정하지 않고 항상 React 에서 제공하는 함수를 사용해 업데이트 (ex. setState)

 

State는 언제 필요할까?

• 동적인 사용자 인터페이스를 만들기 위해 필요
• ex) 카운트 버튼, 실시간으로 변하는 값

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

export default Counter;

vite로 리액트를 npm run dev 를 했을 때 메인화면에 있는 count 버튼과 같은 기능이다.

위 코드에서는 count => state 이고 setCount 함수를 통해 값을 업데이트한다.

 

React : State 의 과거와 현재

• React 의 초기버전에서는 Class 컴포넌트 에서만 State를 사용할 수 있었다.
• this.state 와 this.setState 를 통해 사용

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>현재 카운트: {this.state.count}</p>
        <button onClick={this.increment}>증가</button>
      </div>
    );
  }
}

hooks 로서의 UseState 를 사용할 때 보다 코드 길이가 길고, 연관성도 복잡해보인다.

코드를 작성할 때 생각해야 할 요소가 더 많음. (super, props, extends React.Component)

 

• 현재는 React Hooks 가 도입되어서 Function 컴포넌트에서도 import 를 통해 State를 사용할 수 있게 되었다.
  (Function 컴포넌트란 일반적으로 리액트에서 사용되는 익명함수 -> const app = () => {} 와 같은 의미이다.)
• 사용법  const [count, setCount] = useState(0);
  (useState 의 () 값에는 State 의 초기값이 들어가면 된다.)

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

Class 컴포넌트에서의 사용보다 가독성이 높아지고 코드가 짧아진것을 볼 수 있다.

 

State 값 관리시 주의해야 할 부분 (중요)

1. State 값 직접 수정 X
   • State 값은 불변성을 유지해야한다. 값을 직접적으로 변경하게 되면 컴포넌트가 리렌더링 되지 않는다.
     (리렌더링 => 브라우저 초기화)

   • // 잘못된 예시
     state.count = 1; // 리렌더링이 일어나지 않음 -> State 값의 변화가 실시간으로 적용되지 않음.
     
     // 올바른 예시
     setCount(1); // 리렌더링 발생 -> State 값 변화 실시간 적용

2. State 값을 객체로 관리해야 할 경우 기존 값 지속적으로 업데이트
   • State에 담아야 할 값이 여러개일 경우, 객체로 관리하게 되는데 이 경우 새로운 값이 들어갈 때 마다
     Spread 연산자(...) 를 사용해 기존 객체값을 먼저 setState 함수로 불러와줘야 한다.

   • // 예시 State
     const [user, setUser] = useState({ name: 'Alice', age: 25 });
     
     // 잘못된 예시
     setUser({ name: 'Bob' }); // age 정보가 사라짐
     
     // 올바른 예시
     setUser((prevUser) => ({ ...prevUser, name: 'Bob' })); 
     // ...prevUser 를 이용해 기존 객체값을 불러온 뒤 name 값만 변경.

UseState 활용 예제

• 여러 개의 input 값을 State 로 관리할 수 있다.

• const Form = () => {
    const [formData, setFormData] = useState({ name: '', email: '' });
  
    const handleChange = (e) => {
      const { name, value } = e.target; 
      
      // 추가로 설명하자면 e.target 으로 각각의 input을 잡고
      // name 은 각각의 input 을 잡기위해 사용
      // value 는 name 으로 잡은 각각의 input 의 value 값을 뜻한다.
      
      setFormData((prevData) => ({ ...prevData, [name]: value }));
      
      // prevData 로 기존의 State 값을 가져와 ...prevData 스프레드 연산자를 통해 덮어씌움
      // name 으로 잡은 input의 변경된 value 값을 각 State 값으로 저장.
      
    };
  
    return (
      <form>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </form>
    );
  }

State 와 Props 의 차이

 

Props	State
부모 컴포넌트에서 전달 (부모 -> 자식 절대적)	컴포넌트 내부에서 관리
읽기 전용	읽기 및 쓰기 가능
정적인 데이터 전달	동적인 데이터 관리

 

State 는 React 컴포넌트를 활용함에 있어서 절대적으로 필요한 React Hooks 이다. 

변경되는 값을 저장하고 다루기 위해선 필수적으로 사용되는 Hook 이기 때문에

어느정도 이해하고 넘어가는것이 좋을 것 같다.