[React] Hooks - State, Effect

근데 Hook이 뭔가요?

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않고, 대신 class 없이 React를 사용할 수 있게 해준다.

State Hook

import React, { useState } "react" 

function StateHook() {
  const [state, setState] = useState(초기값)
  
  return (
    <StateHook>스테이트훅</StateHook>
  );
};

여기서 useState가 바로 Hook 이다. Hook을 호출해 함수 컴포넌트(function component) 안에 state를 추가하고 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지된다.
useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 우리는 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있다.

useState의 인자로 무엇을 넘겨주어야 할까요? useState()Hook의 인자로 넘겨주는 값은 state의 초기 값이다. 함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 숫자 타입과 문자 타입을 가질 수 있다.

useState는 무엇을 반환할까? state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환한다. 클래스 컴포넌트의 this.state와 this.setState와 유사하다.

Effect Hook

import React, { useState, useEffect } "react" 

function StateHook() {
  const [state, setState] = useState(초기값)
  const [productInfo, setProductInfo] = useState({})

  useEffect(() => {
    fetch(`${DETAIL_DATA_URL}`)
      .then(res => res.json())
      .then(res => setProductInfo(res))
  }, [])
  
  return (
    <StateHook>스테이트훅</StateHook>
  );
};

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다.

useEffect가 하는 일은 무엇일까? useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말한다. 리액트는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부른다.) DOM 업데이트를 수행한 이후에 불러낸다.