React Hooks: 5분 안에 설명하는 useState

React 앱을 만들 때 거의 항상 구성 요소 내에서 상태를 저장/관리하는 방법이 필요합니다. useState React Hook을 사용하면 이 작업을 더 깔끔하고 간결하게 할 수 있습니다.

후크 전에
useState와 같은 React Hooks 이전에는 React에서 상태를 생성/관리하는 방식이 다음과 같은 클래스 구성 요소를 통해 이루어졌습니다.

class Example extends React.Component {
  constructor(props) {
    super(props);
// creating our state object here
    this.state = {
      count: 0
    };
// -- We access count below via 'this.state.count' -- 
// -- We update/change count via 'this.setState' --
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click Me
        </button>
      </div>
    );
  }
}

반응 후크 후

React Hooks의 도입으로 우리는 더 이상 이런 식으로 상태를 생성/관리할 필요가 없습니다. 우리는 기능적 구성 요소와 useState React Hook을 사용할 수 있습니다.

참고: 후크는 클래스 구성 요소에서 작동하지 않습니다.

useState에 대해 특별히 특별한 것은 없습니다. 결국 우리가 하는 일은 다음과 같습니다.

React에서 useState 가져오기

useState — 첫 번째 항목은 상태 변수의 이름이고 두 번째 항목은 상태 변수를 업데이트하는 데 사용하는 함수의 이름입니다. 우리는 이것들의 이름을 우리가 원하는 대로 지정할 수 있습니다.

state를 useState에 전달하여 초기 값을 제공합니다.

기능 구성 요소 + React Hook useState를 사용하여 위의 코드를 다시 만드는 방법은 다음과 같습니다.

// 1. Importing useState
import React, { useState } from 'react'

function App() {
  // 2. Destructuring useState
  // naming our: state variable 'count' & update function 'setCount'
  let [count, setCount] = useState(0);
  // 3. useState allows us to pass in the starting value, here it is 0

 // below we are:
 // - displaying count with {count}
 // - updating count with setCount when the button is clicked (more info below code)
  return (
    <div className="App">
        <p>You clicked {count} times</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
                Click Me
            </button>
    </div>
  );
}

export default App;

때때로 React는 성능 향상을 위해 상태 업데이트를 "일괄 처리"합니다. 이 때문에 다음과 같이 단순히 상태를 업데이트하는 것은 이상적이지 않습니다.

 <button onClick={() => setCount(count++}>
                Click Me
            </button>

React가 상태 업데이트를 "일괄 처리"하고 버튼 onClick이 위의 코드처럼 보이면 상태가 올바른 값으로 업데이트되지 않을 수 있습니다. 이에 대한 해결 방법은 레크리에이션 코드 스니펫에서 수행한 작업을 수행하는 것입니다.

      <button onClick={() => setCount(prevCount => prevCount + 1)}>
                Click Me
            </button>

여기서 무슨 일이?

버튼을 클릭하면 setCount 업데이트 함수가 호출되지만 값(예: 'count++')을 전달하는 대신 함수를 전달합니다.

함수에는 항상 상태 변수의 이전 값을 참조하는 인수 'prevCount'가 전달됩니다(이를 원하는 대로 호출할 수 있음).

그런 다음 함수는 'prevCount'를 사용하여 항상 올바른 값을 업데이트하고 React가 업데이트를 "일괄 처리"하는 것을 방지합니다.

'count++'와 'prevCount ⇒ prevCount + 1'을 사용하는 것의 차이점은 trying it out yourself.로 더 쉽게 알 수 있습니다. replit으로 이동하여 버튼을 빠르게 클릭합니다. 'count++'를 사용하면 모든 항목이 등록되지 않는다는 것을 알 수 있습니다. 충분히 빠르게 클릭하고 있다면 한 번 클릭하지만 'prevCount ⇒ prevCount + 1'을 사용하면 모든 단일 클릭이 등록되었음을 알 수 있습니다. 따라서 카운트는 항상 정확합니다.

항상 그렇듯이 자세한 내용은 문서를 참조하세요.
State Hook

질문, 피드백이 필요하거나 연결/인사 👋가 필요한 경우 언제든지 내 소셜에 연락하세요.