React hooks란?

React 16.8에서 추가된 새로운 기능입니다.
클래스를 작성하지 않고도 state와 같은 React 기능을 함수 구성 요소에서 간단하게 처리 할 수 ​​있습니다.

React hooks를 기초로부터 이해한다 (useState 편) 지금 여기

React hooks를 기초로부터 이해한다(useEffect편)

React hooks를 기초로부터 이해한다(useContext편)

React hooks를 기초로부터 이해한다(useReducer편)

React hooks를 기초로부터 이해한다(useCallback편)

React hooks를 기초에서 이해 (useMemo편)

React hooks를 기초에서 이해 (useRef편)

useState란?

useState()는 함수 구성 요소에서 상태를 관리 (state 유지 및 업데이트)하는 React 후크이며 가장 많이 사용되는 후크입니다.
state 란, 컴퍼넌트가 내부에 보관 유지하는 「상태」를 말해, 화면상에 표시되는 데이터 등, 어플리케이션이 보관 유지하고 있는 상태를 가리킵니다. state는 props와 달리 나중에 변경할 수 있습니다.

클래스 컴포넌트와 함수 컴포넌트를 비교해보기

클래스 컴퍼넌트와 함수 컴퍼넌트에 있어서의 「상태」의 취급 방법의 차이를 확인해 보겠습니다.

클래스 컴포넌트

import React from 'react'
import './styles.css'

// countの初期値として、1~10までのランダムな数値を生成 
const initialState = Math.floor(Math.random() * 10) + 1

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    // クラスでは、コンストラクタ内で、this.stateの初期値{ count: initialState }をセット
      count: initialState,
      // this.stateの初期値{ open: false }をセット
      open: true
    }
  }
  // toggleメソッドを作成 
  toggle = () => {
    this.setState({ open: !this.state.open })
  }

  render() {
    return (
      <>
        <button onClick={this.toggle}>
          {this.state.open ? 'close' : 'open'}
        </button>
        <div className={this.state.open ? 'isOpen' : 'isClose'}>
          <p>現在の数字は {this.state.count} です</p>
          {/*ボタンをクリックした時に、this.setState()を呼ぶことでcountステートを更新 */}
          <button
            onClick={() => this.setState({ count: this.state.count + 1 })}
          >
            + 1
          </button>
          <button
            onClick={() => this.setState({ count: this.state.count - 1 })}
          >
            - 1
          </button>
          <button onClick={() => this.setState({ count: 0 })}>0</button>
          <button onClick={() => this.setState({ count: initialState })}>
            最初の数値に戻す
          </button>
        </div>
      </>
    )
  }
}

export default Counter

덧붙여서 styles.css의 내용은 이것뿐.

.isClose {
  display: none;
}

.isOpen {
  display: block;
}

이런 카운터가 생겼습니다.

함수 컴포넌트

hooks useState를 사용하여 클래스 구성 요소에서 함수 구성 요소로 다시 씁니다.
함수 컴포넌트의 기본형은 다음과 같다.

const ExComponent = props => {
  // ここでhooksを使える
  return <div />
}

useState의 기본형

//const [状態変数, 状態を変更するための関数] = useState(状態の初期値);
const [count, setCount] = useState(initialState)

// ちなみにクラスコンポーネントでは、、、
this.state = {
  count: initialState
}

useState의 왼쪽에 있는 state 변수의 이름을 지정할 수 있습니다.
(분할 대입 구문을 이미지하면 이해하기 쉽습니다.)

첫 번째 요소: state의 현재 값

두 번째 요소 : state의 현재 값을 업데이트하는 함수

state가 업데이트 되더라도 initialState는 initialState로 유지됩니다

// 関数コンポーネント内で state を使えるようにするため、useState をインポート 
import React, { useState } from 'react'
import './styles.css'

const Counter = () => {
  // countの初期値として、1~10までのランダムな数値を生成
  const initialState = Math.floor(Math.random() * 10) + 1
  // count という名前の state 変数を宣言、初期値 initialState をセット
  const [count, setCount] = useState(initialState)
  // open という名前の state 変数を宣言、初期値 true をセット
  const [open, setOpen] = useState(true)
  // toggleの関数を宣言
  const toggle = () => setOpen(!open)

  return (
    <>
      <button onClick={toggle}>{open ? 'close' : 'open'}</button>
      <div className={open ? 'isOpen' : 'isClose'}>
        <p>現在の数字は{count}です</p>
        {/* setCount()は、countを更新するための関数。countを引数で受け取ることも出来る */}
        <button onClick={() => setCount(prevState => prevState + 1)}>
          + 1
        </button>
        <button onClick={() => setCount(count - 1)}>- 1</button>
        <button onClick={() => setCount(0)}>０</button>
        <button onClick={() => setCount(initialState)}>最初の数値に戻す</button>
      </div>
    </>
  )
}

export default Counter

수업으로 작성한 경우와 동일한 결과를 얻었습니다


재 렌더링 후에도 React는 해당 변수의 현재 state 값을 그대로 갖고 있으며 최신 state 값을 함수에 전달합니다. 현재 state 값을 업데이트하려면 setState를 호출합니다.

마지막으로

다음에 useEffect에 대해 쓰고 싶습니다.

useState 관련 Qiita 기사 작성
React 공식 자습서의 클래스 구성 요소를 함수 구성 요소로 다시 작성

참고로 한 사이트