[TIL] React-Hook's state

Hook's state?

. Function형 component는 Class형과 다르게 state가 없는 대신 React library에서 제공하는 함수를 사용한다.

.useState: current state와 state setter로 구성되어 있다. react는 이 2개의 변수를 array 형태로 return 하는데 naming convention은 아래와 같다. 그리고 이 함수를 사용하기 위해서는 useState를 import 해야한다. useState를 사용하면 currentValue 외에 다음에 rendering 될 값도 추적할 수 있다는 장점이 있다.

import React, { useState } from 'react';

const [variableName, setVariableName] = useState();

. 여기서 toggle은 setToggle로 update된 최신의 state를 갖고 있다.

import React, { useState } from "react";

function Toggle() {
  const [toggle, setToggle] = useState();

  return (
    <div>
      <p>The toggle is {toggle}</p>
      <button onClick={() => setToggle("On")}>On</button>
      <button onClick={() => setToggle("Off")}>Off</button>
    </div>
  );
}

. useEffect

.componentDidMount, componentDidUpdate, componentWillUpdate 등과 같은 동작을 수행한다.

useEffect(() => {
  console.log("componentDidUpdate")
})

useEffect(() => {
  console.log("componentDidMount")
  return () => console.log("componentWillUnmount")
}, [])

useEffect(() => {
  console.log("componentDidMount")
  console.log("componentDidUpdate") // + shouldComponentUpdate
  return () => console.log("???")
}, [state])