[React] useState, prevState활용

State

컴포넌트의 상태를 관리하는 데이터.

사용자의 상호작용이나 시간의 흐름에 따라 변경될 수 있는 데이터를 포함.

State의 변경은 보통 이벤트 핸들러나 다른 입력을 통해 발생하며, 변경이 발생하면 컴포넌트가 자동으로 다시 렌더링됩니다.

 

• 컴포넌트 내부에서 관리: State는 컴포넌트 내부에서 선언되고 변경됩니다. 컴포넌트의 private 데이터로서 외부에서 직접 접근할 수 없습니다.
• 동적 UI: State를 사용하여 동적인 사용자 인터페이스를 만들 수 있습니다. 
• setState 함수: 클래스 컴포넌트에서는 setState 메서드를 사용해 state를 업데이트하고, 함수 컴포넌트에서는 useState 훅을 사용합니다.

 

 

prevState 

React의 상태 업데이트는 비동기적으로 처리될 수 있으며, 특히 여러 상태 업데이트가 동시에 발생할 경우, 최신 상태를 기반으로 계산을 하기 위해 prevState를 사용합니다.

이전 상태를 직접 참조함으로써, 상태 업데이트가 항상 최신의, 의도된 상태 값을 반영하게 됩니다. 이는 상태 업데이트가 여러 번 이루어져도 항상 정확한 값을 유지할 수 있도록 보장해 줍니다.

 

 

 

예시) input을 입력하고 upload를 누르면 새로운 배열을 복사해서 저장하여 출력

 

  const [input, setInput] = useState('');

  const inputChange = (e) => {
    setInput(e.target.value);
  }

  const [arr, setArr] = useState([]);

  const handleUpload = () => {
    setArr(prevArr =>  [input, ...prevArr]);
    setInput('');
  }

  return (
    <div className="App">
      <input type='text' value={input} onChange={inputChange} />
      <button onClick={handleUpload}>Upload</button>

      {arr.map((name, idx) => {
        return <p key={idx}>{name}</p>
      })}
    </div>
  );