[React] 리액트의 Hooks 예제로 정복하기

React Hooks

functional component에서 state를 가질 수 있게 만듦 

class component, componentdidMount, render() 할 필요가 없음  -> 하나의 funciton 이 됨

이것은 함수평 프로그래밍 이라는 뜻이기도 함! 

 

 

recompose  + react  = 리액트 훅!

 

 

 

📌Class component를 이용한 react (기존 방식)

버튼 클릭시 count 가 하나씩 증가하는 기능

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

class App extends React.Component{
  state = {
    count: 0
  };

  modify = (n) => {
    const { count } = this.state;
    // this.setState({count:this.state.count+1})
    this.setState(current => {
      return {
        count: n
      };
    });
  };

  render() {

    const { count } = this.state;

    return (
      <>
        <div>{count}</div>
        <button onClick={() => this.modify(count + 1)}>increase</button>
      </>
    );
  }
}

export default App;

1) class component 생성

2) state  지정

3) this 로  연결

 

 

 

 

 

 

 

📌React Hooks

useState

useState(초기값)

useState는 array를 반환 함

 

array [ 인자값 , 수행할 행위 ] 

 

 

 

예제1) 버튼 클릭시 count 증가

import React,{useState} from "react";
import './App.css';
const App = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      {count}
      <button onClick={() => {
        setCount(count+1)
      }}>Increment</button>
    </>
    
  );

}

export default App;

⭐️  useState

const [ count, setCount ] = useState(0)
const [ value, value를 변경하는 법 ] = useState(value의 초기값)

 

 

 

 

Eamil input 받기 

import React,{useState} from "react";
import './App.css';
const App = () => {

  const [email, setEmail] = useState("");

  const updateEmail = e => {
    const {
      target: { value }
    } = e
    setEmail(value);
  }

  
  return (
    <>
      <input placeholder="Email" value={email} onChange={updateEmail}/>
    </>
    
  );

}

export default App;

 

 

 

이렇게 ReactHook을 사용하게 되면 실제로 class형태로 구현하던 것들을 함수형으로 구현 할 수 있게 하며

구현 방법 또한 간단하다.

 

이제 자주 사용되는 ReactHook들을 배워보자 

 

 

참고

www.youtube.com/watch?v=yS-BU6eYUDE