react hook

Hook ?? 

1. state hook

useState를 이용하여 현재의 state 값과 이 값을 업데이트 하는 함수의 쌍

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

function App() {
  const [data , setData] = useState((new Date().toString()));

  return (
    <div className="App">
      <header className="App-header">
        <h1>react hook</h1>
        {data}
        <h1><a href="#" onClick={()=>{
            setData(new Date().toString());
        }}> 현재시간 </a></h1>
      </header>
    </div>
  );
}

export default App;

 

2. Effect hook

class 생명주기의 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것?

• 첫번째 랜더링과 이후의 모든 업데이트에서 수행됨
• effect가 수행되는 시점에 이미 DOM이 업데이트

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

function App() {
  const [data , setData] = useState((new Date().toString()));
  useEffect(()=>{
    alert('현재시간 출력' + data);
  })

  return (
    <div className="App">
      <header className="App-header">
        <h1>react hook</h1>
        {data}
        <h1><a href="#" onClick={()=>{
          setData(new Date().toString());
        }}> 현재시간 </a></h1>
      </header>
    </div>
  );
}

export default App;

※ class component 내부에서는 hook 사용 불가

 

effect 사용법은 좀 더 알아보자....