React 기초 - Hooks API 사용하기 (useState, useEffect)

React Hooks API

• Class Component를 사용하지 않고도 state를 사용할 수 있도록 해준다.
• 즉, functional component에서 state를 가질 수 있도록 한다.
• 이런 기능이 유용한 이유는, class를 사용하지 않고 functional programming style 적용이 가능하도록 해주기 때문이다.
• hook의 종류에는 useState, useEffect이 있고 이들을 활용해 다양한 hook을 만들어 활용할 수 있다.
• 리액트 hooks 공식 페이지 (https://ko.reactjs.org/docs/hooks-intro.html)

---

사용예시 : useState

import React, { useState } from "react";

const App = () => {
    const [count, setCount] = useState(0);
    return (
        <>
            {count}
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <button onClick={() => setCount(count - 1)}>Decrement</button>
        </>
    )
}

export default App;

• 가장 대표적인 Hooks 모듈인 useState는 state 변수값 하나와 이를 설정하는 메소드를 array의 형태로 리턴하여 이를 활용할 수 있도록 해준다.
• react로부터 모듈을 불러올 수 있으며, 항상 2개의 Value를 리턴한다. (변수, 변수설정 메소드)
• 해당 Value들의 이름은 원하는대로 설정하지만 관습적으로 A, setA 로 많이 설정한다.
• 위 코드에서는 useState를 사용하여 count라는 변수와 이를 설정하는 setCount 메소드를 생성했다.
• 그리고 이를 활용해 숫자를 늘리고 줄이는 간단한 페이지를 구성했다.

---

사용예시 : useEffect

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• class component의 componentDidMount, componentWillUnmount, componentWillUpdate와 유사한 기능을 수행한다.
• class component의 해당 기능들과 유사하게 페이지가 처음 mount되거나, state변경으로 update되거나, unmount되었을 때 useEffect 메소드의 내용이 수행된다.
• componentWillUnmount와 동일한 기능을 수행하려면 return값에 사용할 콜백함수를 입력하면된다.
• 두번째 파라미터로 state 데이터를 주면 해당 값이 변경할때만 메소드가 작동된다. (mount 및 unmount에서는 그대로 작동하지만 다른 state 값이 변경될 때는 작동하지 않는다.)