Using the State Hook

Hook을 사용하여 props와 setState구현

• Hook은 Class없이 React 기능들을 사용하는 방법을 제시합니다.
• Hook은 기본 제공되는 내장된 훅과 사용자 정의 훅이 있습니다.
• Hook의 특징은 이름이 'use'로 시작합니다.
• import { useState } from 'react' 로 import합니다.
• useState의 반환값은 [props값, setState함수]로 구성된 길이가 2인 배열입니다.'
• 함수에도 props를 전달받을 수 있지만 this를 사용하지는 않습니다.
• 컴포넌트 함수를 리액트가 호출할때 첫번째 인자 값으로 props값을 전달하는것을 이용하여 파라미터를 명시하여 props값을 전달받을 수 있습니다.
• useState사용법은 아래와 같습니다.

function FuncComp(fprops) {
  var numState = useState(fprops.num); //무조건 배열이 리턴됨 ,첫번째 값이 반환값
  var number = numState[0]; //배열의 첫번째 값은 상태값(props)
  var setNum = numState[1]; //함수가 담기며 그 함수를 통해 값 변경 가능

또는 useState의 전달 두 요소를 배열변수에 한꺼번에 저장****
var [_date,_setDate] = useState(new Date().toString());
return (

<div>...</div> 

)

import React, { Component } from 'react';
import { useState } from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello function Style World!!!</h1>
      <FuncComp num={2}></FuncComp>
      <ClsComp num={3}></ClsComp>
    </div>
  );
}
function FuncComp(fprops) {
  var numState = useState(fprops.num); //무조건 배열이 리턴됨 ,첫번째 값이 반환값
  var number = numState[0]; //배열의 첫번째 값은 상태값(props)
  var setNum = numState[1]; //함수가 담기며 그 함수를 통해 값 변경 가능

  var dateState = useState(new Date().toString());
  var _date = dateState[0]; //props값
  var _setDate = dateState[1]; //setState함수

  //두 요소를 배열변수에 한꺼번에 저장****
  //var [_date,_setDate] = useState(new Date().toString());

  //자신이 렌더 함수
  return (
    <div className="container">
      <h2>Function Style Component</h2>
      <h4> parameterNum :{numState[0]}</h4>
      <h4> newDate :{dateState[0]}</h4>
      <input
        type="button"
        value="random"
        onClick={function () {
          numState[1](Math.random());
        }}
      ></input>
      <input
        type="button"
        value="date"
        onClick={function () {
          dateState[1](new Date().toString());
        }}
      ></input>
    </div>
  );
}
var classStyle = 'color : red';
class ClsComp extends Component {
  state = {
    number: this.props.num,
    date: new Date().toString(),
  };

  UNSAFE_componentWillMount() {
    console.log('%cclass=>componentWillMount', 'color:lightblue'); //console.log('%c문자열',css(속성:값))
  }
  UNSAFE_componentDidMount() {
    console.log('%cclass=>componentDidMount', 'color:pink');
  }
  render() {
    console.log('render');
    return (
      <div className="container">
        <h2>Class Style Component</h2>
        <h4>Number : {this.state.number}</h4>
        <h4>Date : {this.state.date}</h4>
        <input
          type="button"
          value="random"
          onClick={function () {
            this.setState({ number: Math.random() });
          }.bind(this)}
        ></input>
        <input
          type="button"
          value="date"
          onClick={function () {
            this.setState({
              date: new Date().toString(),
            });
          }.bind(this)}
        ></input>
      </div>
    );
  }
}

export default App;