React Hooks 간단 예습

강의 듣기 전 / NomardCoder | YouTube hooks 예습 정리본

 

- hook은 결론적으로 functional component에서 state를 가질 수 있게 해줌

(class component, did mount, render 안해도 된다)

- recompose + react = react hooks

 

 

1. react hooks 사용법 익히기 

react hooks 사용한 count, input 만들어보기 (기본예제)

 

useState

 

//react hooks사용
import React, {Component, useState} from "react"; //선언
import "./styles.css";

const App = () => {
 //useState 2개를 준다. 하나는 value, 두번째는 이를 변경하는 방법
 //count, setState 외 다른 변수명을 지어도 상관없음
  const [count, setCount] = useState(0);
  const [email, setEmail] = useState('');

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


  return (
    <>
      {count} //숫자
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
      <input placeholder="email" value={email} onChange={inputForHandler}/>
    </>
  )

}

export default App;

 

- useState - 위 array로 작업한다, 왜냐면 useState는 array를 return하기 때문

 

 

useEffect

 

-  componentDidMount, did update와 비슷함, 주로 API에서 데이터를 요청할 때 사용함

 

 

useRef

 

 ref (reference)

= 전체 component 중 하나의 node, element를 선택하는 방법

= document.getElementById( )랑 같은 방법

 

---

+복습) input의 value를 새로운 내용생성시 마다 바꿔주길 원하면, onChange를 사용해야한다

 

 

---

2. hooks의 실제 사용 예시

 

- react사용시 불편한 점  - input handling, data fetching

-> 위 두가지의 hook을 만들어 볼 것

 

1) input

 

import React, { useState } from "react";
import ReactDOM from "react-dom";

function useInput (defaultValue) {
  const [value,setvalue] = useState(defaultValue);
  
  const inputHandler = (e) => {
    const {target : {value}} = e;
    setvalue(value);
  };
}

function App(){
  const name = useInput("")
  return(
      <div className="App">
        <h1>Input Hook</h1>
        {/* <input placeholder="text" value={name.value} onChange={name.inputHandler}/>      */}
        <input placeholder="text" {...name}/>     
      </div>
  )
}


const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

 

- {...name} === value={name.value}  onChange={name.onChange}

 

 

2) fetch

 

- useEffect는 componentDidMount와 같은 효과를 준다.+ componentDidUpdate와 같은 것임

- [ ] === component가 didmount할 때, 이 함수를 불러라 (업데이트 말고)

 

 

---

 

* useState는 항상 2개의 value를 return

첫번째 value는 item, 두번째 value는 값을 변경하게 함

 

import React, {useState} from "react";
import "./styles.css";

function App() {
  const [item, setItem] = useState(1);  //useState(initialState)
  return (
    <div className="App">
      <h1>{item}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

export default App;

 

- useState는 초기에 state를 initialState를 세팅 할 수 있는 옵션을 제공함

- useState는 배열을 return한다고 생각하기. ( 만약 item만 사용하고 싶다면, const item = useState(1)[0]로 사용가능 )

- hook은 함수형 프로그래밍을 권장하기 때문에, arrow function 사용가능 (아래처럼)

 

↓

 

arrow function으로,

 

import React, {useState} from "react";
import "./styles.css";

const App = () => {
  const [item, setItem] = useState(1); 
  
  return (
    <div className="App">
      <h1>{item}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

export default App;

 

---

 

3. hook을 이용한 count  vs  class를 이용한 count  비교

 

//hook
import React, {useState} from "react";
import "./styles.css";

const App = () => {
  const [item, setItem] = useState(1);  //useState(initialState)
  
  const upItem = () => {setItem(item+1)}
  const downItem = () => {setItem(item-1)}

  return (
    <div className="App">
      <h1>Count {item}</h1>
      <button onClick={upItem}>upItem</button>
      <button onClick={downItem}>downItem</button>
    </div>
  );
}

export default App;

----------------------------------------------------------------------------------------------

//class
import React, {useState} from "react";
import "./styles.css";

class App extends React.Component{
  state = {
    item : 1
  }

  upItem = () => {
    this.setState(state => {
      return{
        item: state.item+1
      }
    })
  }
  downItem = () => {    
    this.setState(state => {
      return{
        item: state.item-1
    }
  })
}

  render(){
    const { item } = this.state;

    return (
      <div className="App">
        <h1>Count {item}</h1>
        <button onClick={this.upItem}>upItem</button>
        <button onClick={this.downItem}>downItem</button>
      </div>
    )
  }}

  export default App;

 

- hook 사용이 훨씬 직관적이고 간단.