React의 상태 관리

상태는 React 구성 요소에 전달된 현재 데이터입니다. React의 상태 관리를 사용하면 구성 요소의 데이터를 동적으로 업데이트할 수 있습니다.

이 게시물은 Reactjs에서 상태 업데이트를 트리거하는 초기 상태 및 이벤트를 생성하는 과정을 안내합니다.

전제 조건:

NodeJS 설치됨

React 지식

소스 코드 및 데모

GitHub Repo Link

새 React 앱 만들기:

# create a new react app
npx create-react-app state-management-demo
# move into the new app's directory
cd state management-demo
# start the app to see if everything is okay
npm start

데모의 경우 App.js를 청소하여 다음을 얻습니다.

const App = () => {
  return <div>My React Application</div>
}

export default App

상태 관리를 시연하기 위해 간단한 카운터 버튼을 만들 것입니다.
App.js 파일 맨 위에서 가져오기useState:

import { useState } from 'react'

App() 함수 내에서 기본 상태인 0 를 설정합니다. 그런 다음 사용자가 버튼을 클릭하면 클릭당 숫자가 1 증가합니다.

const [count, setCount] = useState(0)

버튼을 클릭하면 실행되는 함수를 추가합니다.

  const handleClick = () => {
    setCount((count) => {
      return count + 1
    })
  }

반환 함수를 다음과 같이 업데이트합니다.

  return (
    <div className='container'>
      <h1>Counter</h1>
      <p>{count}</p>
      <button className='btn btn-outline-secondary' onClick={handleClick}>Click Me!</button>
    </div>
  )

개발 서버를 실행하고 포트 3000에서 브라우저를 엽니다: http://localhost:3000/


전체 코드:

다음은 데모입니다.

<iframe src="https://codesandbox.io/embed/tender-lewin-yiw2pz"style="너비:100%; 높이:calc(300px + 8vw); 테두리:0; 테두리 반경: 4px ; 오버플로:숨김;"allow="geolocation; 마이크; 카메라; midi; vr; 가속도계; 자이로스코프; 지불; 주변광 센서; 암호화된 미디어; usb"loading="lazy"sandbox="allow-modals allow-forms allow-popups allow- 스크립트 허용-동일 출처">
</iframe>

결론:

구성 요소를 만들고 useState 후크를 사용하여 클릭 횟수를 표시하는 버튼을 추가했습니다. 멋지지 않나요?

참조:

• React Hooks and State