TIL_64_Hook

생활코딩 Hook

함수형 컴퍼넌트

함수 스타일 코딩으로 할 수 없는 대표적인 작업이
컴퍼넌트 내부의 스테이트를 만들어 사용하는 것.
또한 컴퍼넌트의 생성 변경 소멸에 대한 이벤트인
라이프 사이클 api를 사용할 수도 없었음.

그래서 함수 방식은 상위 컴퍼넌트가 시키는 일만 처리하는
단순한 컴퍼넌트에만 사용이 됐었다.

최신 리엑트에서 훅 이라는 개념이 도입이 되면서 함수 방식에서도 내부적으로 상태를 다룰 수 있게 되었고 또 컴퍼넌트의 라이프사이클에 따라서 해야 할 작업을 정의할 수 있게 되었다.

클래스 방식 컴퍼넌트의 심부름꾼이었던 함수 방식 컴퍼넌트가 클래스 방식과 대등한 존재로 격상된 것.

동시에 함수가 가지고 있던 간편함은 그대로.

함수형 컴퍼넌트는 과거에 스테이트 값을 가질 수가 없었다.
그리고 컴퍼넌트가 생성되고 업데이트되고 소멸되는 과정인 컴퍼넌트의 라이프사이클과 관련된 작업을 처리할 수 없었다.
훅이 등장하면서 스테이트를 처리할 수 있게됐고 라이프사이클을 관리할 수 있게 되었다.

// App.js
import React from 'react';
import './App.css';

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;
          
//props의 값을 스테이트로 줬다.
//스테이트의 값이 바뀔 때마다 랜더 메소드가 호출.
//셋 스테이트에 의해서 스테이트 값이 바뀌고, 
//스테이트 값이 바뀌면 랜더 메소드가 호출되면서 바뀐 결과가 반영.

훅의 개요.
내장된 훅과 사용자 정의 훅.

useState -> 내장된 훅. 이름이 유즈로 시작됨.

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

function App() {
  return (
    <div className="container">
      <h1>Hello World</h1>
      <FuncComp initNumber={2}></FuncComp>
      <ClassComp initNumber={2}></ClassComp>
    </div>
  );
}

function FuncComp(props) {
  let numberState = useState(props.initNumber);
  
//스테이트를 만들고 싶다면, 유즈스테이트에 어떠한 값을
//전달하면 우리가 지금 만드는 그 스테이트의 초기값이 된다. 
//그렇게 해서 리턴된 값의 첫번째 자리가 그 값이 된다.
  
  let number = numberState[0];
  let setNumber = numberState[1];
  console.log('numberState', numberState);
  
//유즈 스테이트를 쓰면 무조건 배열이 리턴.
  
  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number : {number}</p>
      <input type="button" value="random" onClick={
        function() {
          setNumber(Math.random());
        }
       }></input>
    </div>
  );
}

//this 는 클래스 안에서 필요한거기 때문에 
//함수형 컴퍼넌트에서는 필요가 없다.
//함수형 컴퍼넌트에서 스테이트를 만들 때 유즈 스테이트를 호출.
//그 스테이트의 인자로 그 스테이트의 초기값이 온다. 
//유즈 스테이트는 배열을 리턴하고 2개의 값으로 이루어져있는데 
//그 중 첫번째 값은 상태값, 두번째 값은 상태를 바꿀 수 있는 함수다. 
//그래서 첫번째 값과 두번째 값을 통해서 함수 안에서도 
//스테이트를 사용할 수 있게 된 것.

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;

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

function App() {
  return (
    <div className="container">
      <h1>Hello World</h1>
      <FuncComp initNumber={2}></FuncComp>
      <ClassComp initNumber={2}></ClassComp>
    </div>
  );
}

function FuncComp(props) {
  let numberState = useState(props.initNumber);
  let number = numberState[0];
  let setNumber = numberState[1];

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

//위의 세 줄을 한 줄로 축약해서 쓸 수 있다. 이렇게
//-> let [_date, setDate] = useState((new Date()).toString()));

  console.log('numberState', numberState);
  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number : {number}</p>
      <p>Date : {_date}</p>
      <input type="button" value="random" onClick={
        function() {
          setDate((new Date()).toString());
        }
       }></input>
    </div>
  );
}
// 클래스 같은 경우에는 스테이트를 하나의 객체 안에 넣어야됐는데 
//함수 방식에서는 스테이트를 만들 때마다 use스테이트를 사용하면 된다.

class ClassComp extends React.Component{
  state = {
    number:this.props.initNumber
    date:(new Date()).toString()
  }

  render(){
    return (
      <div className="container">
        <h2>class style component<h2>
        <p>Number : {this.state.number}</p>
        <p>Date : {this.state.date}</p>
        <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;