Hooks와 Class 컴포넌트, react hook을 쓰는 이유

Class 컴포넌트를 사용해서 state 값을 증가시키려면

class App extends Component {
  state = {
    count: 0,
  };
  // state를 정의해야하고
  modify = (n) => {
    this.setState({
      const: n,
    });
  };
  // 그걸 정의해야하고
  render() {
    const { count } = this.state;
    // 패스해야하고
    return (
      <>
        <div>{count}</div>
        <button onClick={() => this.modify(count + 1)}>Increment</button>
      </>
    );
  }
}
export default App;

이렇게 하나하나 다 지정해줘야했다.

반면 hook을 사용해서 state 값을 증가시키려면

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      {count}
      <button onClick={() => setCount(count + 1)}>increment</button>
    </>
  );
};
export default App;

useState

useState는 array로 2가지를 준다.첫번째 요소는 value, 두번째 요소는 이를 변경하는 방법.

 

const [count, setCount] = useState(0);

이렇게 표시하는 이유도 정말 보이는 그대로였다.

array의 첫번째 요소는 value이고, 이건 0에서 시작한다. 두번째 요소인 setCount로 value인 count를 변경한다.

 

const App = () => {
  const [count, setCount] = useState(0);
  const [email, setEmail] = useState("");
  const updateEmail = (e) => {
    const {
      target: { value },
    } = e;
    setEmail(value);
    // event로부터 target을 value로 넣어서 가져온 뒤 setEmail에 가져온 그 value를 넣음
  };
  return (
    <>
      {count}
      <button onClick={() => setCount(count + 1)}>increment</button>
      <input placeholder="Email" value={email} onChange={updateEmail} />
    </>
  );
};
export default App;

이렇게 간단하게 input의 onChange 이벤트를 발생시킬 수 있다

 

EffectHooks

class 컴포넌트에서의 life cycle이었던,

 componentDidMount와 componentDidUpdate와 비슷하다

API에서 데이터를 요청할 때 사용한다