hook

8591 ワード

React useState hook frontend テキストリンク

公式ドキュメントのhookの概要
正式なドキュメントの内容を要約すると、state、props階層の変化の困難/ライフサイクルメソッドを用いた複雑さ/クラスの困難/hookが作成されます.
しかしclassは削除されないそうです.(すでにclassコンポーネントが作成されているサイトが多いので、hookと並行する必要があります.)

Thinking in Hooks

class素子とfunction素子(hooks)の形状には以下の違いがあります.

//class component
//prevState/ prevProps와 state/ props를 비교해서 컴포넌트를 업데이트한다.
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleOnClick = this.handleOnClick.bind(this);
  }

  handleOnClick(e) {
    this.setState({ count: this.state.count + 1 });
    // this.setState(prevState=>({
    //    count: prevState.count+1
    // }))
  }
  render() {
    return (
      <div className="App">
        <p>you clicked {this.state.count} times</p>
        <button onClick={this.handleOnClick}>click</button>
      </div>
    );
  }
}

//function component(hooks)
//useState의 두 번째 인자에 의존하여 update한다.
//state,props에 종속되지 않고 개발자가 원하는 변수 변화에 따른 함수 실행
export default function App() {
  //import React, {useState} from 'react';일 경우
  const [count, setCount] = useState(0);//0은 초기값
  
  //import React from 'react';일 경우
  //const [count], setCount] = React.useState(0)//0은 초기값
  
  return (
    <div className="App">
      <p>you clicked {count} times</p>
      <button onClick={()=>{setCount(count+1)}}>click</button>
    </div>
  );
}