react Class vs Function

class 에서 state 사용 함수방식은 사용을 못했다.
그러나 최신 리액트에서는 hook 도입
함수방식에서도 상태 다룰 수 있고 라이프 사이클 다룰 수 있음.

hook 으로 인해 function 스타일 급부상

import "./App.css";
import React from "react"; // 이건 아래 class component 만들떄 필요

function App() {
  return (
    <div className="container">
      <h1> Hello World </h1>
      <FuncComp></FuncComp>
      <ClassComp></ClassComp>
    </div>
  );
}
function FuncComp() {
  return (
    <div className="container">
      <h2>function style component</h2>
    </div>
  );
}
class ClassComp extends React.Component {
  render() {
    return (
      <div className="container">
        <h2>class style component</h2>
      </div>
    );
  }
}

export default App;

이렇게 앱을 생성해준다. 함수형은 바로 리턴을 써서 편하다.

원래 props는 둘다 가능하지만, state는 class만 사용가능했는데, 이제 function도 사용 가능해졌다.
클래스에서는 스테이트 값을 만들어주고 그 값을 this.state.number이런식으로 받아와주고 버튼에서 그 값을 setState({ number : Mate.random()}) 이런식으로 컨트롤 해줬다.

그런데 이제, hook 으로 function도 그 기능이 가능해졌다

import "./App.css";
import React from "react"; // 이건 아래 class component 만들떄 필요

function App() {
  return (
    <div className="container">
      <h1> Hello World </h1>
      <FuncComp initNumber={2}></FuncComp>
      <ClassComp initNumber={2}></ClassComp>
    </div>
  );
}
function FuncComp(props) {
  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number : {props.initNumber}</p>
    </div>
  );
}
class ClassComp extends React.Component {
  state = {
    number: this.props.initNumber,
  };
  render() {
    return (
      <div className="container">
        <h2>class style component</h2>
        <p>Number : {this.state.number}</p>
        <input
          type="button"
          value="random"
          onClick={function () {
            this.setState({ number: Math.random() });
          }.bind(this)}
        ></input>
      </div>
    );
  }
}

export default App;

hook 의 이름은 use 로 시작한다

useState(state) 첫번째 인자로 state를 , 두번째 인자로 함수를 갖는다.
따라서 `[ _date, setDate ] =useState(new Date().toString()) 이 된다면
useState(이 안에 있는 것) 이 바로 _date 초기값이 되고
setDate 는 setState처럼 사용이 가능한데, 아래 예시에서 처럼 인자로 함수를 받아서 사용이 가능한 것이다.

function FuncComp(props) {
  let numberState = useState(props.initNumber); // useState 의 첫번째 자리가 스테이트값이됨.
  let number = numberState[0];
  let setNumber = numberState[1];

  // let dateState = useState(new Date().toString());
  // let _date = dateState[0];
  // let setDate = dateState[1];

  let [_date, setDate] = useState(new Date().toString());
  //축약형
  console.log(numberState); // 배열이 리턴되고 2개의값을 갖는다. 첫번쨰 값이 바로 state
  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number : {number}</p>
      <p>Date : {_date}</p>
      <input
        type="button"
        value="random"
        onClick={function () {
          setNumber(Math.random());
        }}
      ></input>
      <input
        type="button"
        value="date"
        onClick={function () {
          setDate(new Date().toString());
        }}
      ></input>
    </div>
  );
}