React의 간단한 `useState()`

React의 간단한 useState()

This is a hands-on code tutorial on creating react components and using hooks.

최종 제품 보기here

반응에 대한 지식이 거의 없거나 기본 사항만으로 튜토리얼을 진행합니다.

내 저장소를 복제하여 코드 스니펫을 살펴보거나 단순히 create-react-app 을 사용하여 새로운 반응 앱을 생성하여 시작하십시오.

새 React 앱 만들기:

# create a new react app
npx create-react-app usestate-react
# move into the new app's directory
cd usestate-react
# start the app to see of everything is okay
npm start

내 레포 복제

GitHub Repo Link

git을 사용한 복제:

git clone [email protected]:ChrisAchinga/usestate-demo.git

gh를 사용한 복제:

gh repo clone ChrisAchinga/usestate-demo

카운터 구성 요소

src/components에서 새 파일Counter.js을 만듭니다.
작동 중인 구성 요소를 보려면 App.js 폴더의 src 파일로 구성 요소를 가져와야 합니다.

파일( src/App.js ) 맨 위에 import 문을 추가합니다.

import Counter from './components/Counter'

이제 App() 구성 요소를 사용하도록 Counter 함수를 업데이트합니다.

const App = () => {
  return (
    <>
      <main>
        <Counter />
      </main>
    </>
  )
}

PS: I love using arrow functions and fragments in react

최종App.js 파일은 다음과 같아야 합니다.

import Counter from './components/Counter'
import './App.css'

const App = () => {
  return (
    <>
      <main>
        <Counter />
      </main>
    </>
  )
}

export default App

클릭하면 초기 숫자를 1씩 업데이트하는 버튼이 있는 Counter 구성 요소를 만들어 봅시다.

한 줄씩 해봅시다: (알겠습니다, 농담 같지만)

먼저 react에서 useState()를 가져옵니다.

import { useState } from 'react'

버튼을 클릭할 때마다 업데이트해야 하므로 반응 후크가 필요합니다.useState()는 단순히 반응 후크입니다.

둘째, 버튼을 표시할 컴포넌트 함수를 만듭니다.

const Counter = () => {
  return (
    <>
      <button>0</button>
    </>
  )
}

파일 맨 아래에서 모듈을 내보내는 것을 잊지 마십시오.

export default Counter

앱을 실행하여 모든 것이 설정되었는지 확인합니다.

다음과 같이 작은 0이 있는 큰 버튼이 있어야 합니다(LOL - 의도된 스타일 없음).



세 번째 단계: Counter 구성 요소에 후크를 설정해 보겠습니다.

useState() 후크 구문은 다음과 같습니다.

const [state, setstate] = useState(initialState)

간단한 구조 분해 구문입니다.
state는 useState()의 매개변수에 의해 설정된 초기 값이 되며, 이 경우에는 0입니다. setstate는 이벤트 또는 트리거 후에 state를 업데이트하기 위해 실행되는 함수입니다.

파일로 돌아가서 src/components/Counter.js useState() 후크로 업데이트해 보겠습니다.

const [initial, updater] = useState(0)

initial를 0(useState(0))으로 설정한 다음 버튼을 클릭할 때 실행되어 initial 값을 클릭 횟수로 업데이트하는 함수가 있습니다. 이 경우에는 updater .

Counter.js 파일은 다음과 같아야 합니다.

import { useState } from 'react'

const Counter = () => {
  const [initial, updater] = useState(0)
  return (
    <>
      <button>0</button>
    </>
  )
}

export default Counter

네 번째 단계는 업데이터 기능을 만드는 것입니다. 여기에서 쉽게 할 수 있습니다.

여전히 Counter() 함수에서 return 키워드 바로 위에 다음 함수를 추가합니다.

const clickEvent = () => updater(initial + 1)

이는 다음과 동일합니다.

function clickEvent() = {
    updater(initial + 1)
}

따라서 clickEvent() 함수는 후크에서 선언한 updater를 사용합니다. 단순히 초기 값에 1을 더합니다.

갇힌? 걱정하지 마세요. 지금까지의 파일은 다음과 같습니다.

import { useState } from 'react'

const Counter = () => {
  const [initial, updater] = useState(0)
  const clickEvent = () => updater(initial + 1)
  return (
    <>
      <button>0</button>
    </>
  )
}

export default Counter

이제 후크를 사용하도록 버튼을 업데이트하겠습니다.

하드 코딩0을 제거하여 버튼을 더 동적으로 만들고 더 정적으로 만들 것입니다. 방법은 다음과 같습니다.

<>
  <button>{initial}</button>
</>

0를 버튼을 클릭할 때마다 업데이트되는 변수로 바꿉니다.

마지막 단계는 onClick 함수를 추가하여 버튼을 클릭했을 때 수행할 작업을 알려줍니다.

우리가 원하는 것은 clickEvent() 함수가 버튼을 클릭할 때마다 실행되는 것입니다.

그래서 우리가 하는 일은 다음과 같습니다.

<>
  <button onClick={clickEvent}>{initial}</button>
</>

우리는 버튼을 클릭할 때마다 clickEvent() 함수를 실행하도록 반응에 지시하고 있습니다.

이제 카운터 구성 요소가 준비되었습니다!

import { useState } from 'react'

const Counter = () => {
  const [initial, updater] = useState(0)
  const clickEvent = () => updater(initial + 1)
  return (
    <>
      <button onClick={clickEvent}>{initial}</button>
    </>
  )
}

export default Counter

요약하자면:

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

노트:

세미콜론을 사용하지 않도록 js 환경을 더 예쁘게 설정했습니다.