#1 USESTATE

1.0 Introduction to useState

리액트의 불편한 점 2가지
1. handling input
2. fetching data

 

hooks는 class component, render등을 고려할 필요가 없다.

import React, { useState } from "react";

const [item, setItem] = useState(1)

item: 변경할 state

setItem: item의 modifier

 

Hooks vs Class component

import React, { useState } from "react";

// Hooks로 구현한 경우
function App() {
  const [item, setItem] = useState(1);
  const incrementItem = () => setItem(item + 1);
  const decrementItem = () => setItem(item - 1);
  return (
    <div className="App">
      <h1>Hello {item}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={incrementItem}>Increment</button>
      <button onClick={decrementItem}>Decrement</button>
    </div>
  );
}

// class component로 구현한 경우
class AppUgly extends React.Component {
  state = {
    item: 1
  };
  render() {
    const { item } = this.state;
    return (
      <div className="App">
        <h1>Hello {item}</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={this.incrementItem}>Increment</button>
        <button onClick={this.decrementItem}>Decrement</button>
      </div>
    );
  }
  incrementItem = () => {
    this.setState((state) => {
      return {
        item: state.item + 1
      };
    });
  };
  decrementItem = () => {
    this.setState((state) => {
      return {
        item: state.item - 1
      };
    });
  };
}

export default App;

위의 간단한 예제만 봐도 class component로 구현한 경우의 코드가 훨씬 massive한 것을 확인할 수 있다. 

---

1.1 useInput

...something

<input placeholoder="Name" value={name.value} onChange={name.onChange} />
<input placeholoder="Name" {...name} />
// ...: name의 모든 것을 풀어 줌

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) => {
    console.log(event.target);
  };
  return { value, onChange };
};

const App = () => {
  const name = useInput("Mr.");
  return (
    <div className="App">
      <h1>Hello</h1>
      <input placeholoder="Name" value={name.value} onChange={name.onChange} />
    </div>
  );
};

다른 function에서 event를 처리할 수 있다.
react component가 아니라 완전히 다른 function이다.
이벤트를 분리된 파일, 다른 entity에 연결해서 처리할 수 있다.

---

1.2 useInput part Two

useInput 확장하기

- useInput에 validator 추가

 

---

1.3 useTabs