React Hook

• 함수형 컴포넌트에서 클래스형 컴포넌트에서만 이용이 가능했던 State와 라이프 싸이클 메소드를 사용할 수있게해준다.
• 리액트에서 기본적으로 제공하는 훅들은 use로 시작하는 함수다.

useState

• state를 함수형 컴포넌트에서 사용할 수있게해준다.

import React, { useState } from 'react';
function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 한다.
  const [count, setCount] = useState(0); // 초기값은 0 으로 설정.

-> useState는 state변수에해당하는 count, 이 변수를 갱신 할 수있는 함수 setCount를 쌍으로 반환한다.

• useState외에도 리액트에서는 다향한 훅을 제공한다.

useEffect

• 클래스 컴포넌트에서 사용했던 라이프사이클 메서드 3가지
  1.componentDidMount (처음 컴포넌트가 만들어질떄 실행됨)
  2.componentDidUpdate ( 생성된이후 업데이트가 발생할떄 생성됨)
  3.componentWillUnmount ( 컴포넌트가 없어질떄 실행됨)
• 위의 3가지 함수가 합쳐진 것으로 생각해도 괜찮다.

1. 컴포넌트 생성 + 업데이트시 호출

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }); // useEffect함수의 두번쨰인자로 값을 전달하지않을시 컴포넌트생성,업데이트시 호출된다.
}

2. 컴포넌트 생성시에만 호출

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[]); // useEffect함수의 두번쨰인자로 빈 배열을 전달하면 생성시에만 호출된다.
}

3. 해당 값이 업데이트 될떄마다 호출

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[count]); // count가 바뀔 떄만 호출.
}

4. 컴포넌트가 사라질떄 호출

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
    return function cleanup() {};
  },[]); // useEffect함수의 리턴값으로 컴포넌트가 사라질떄 실행시킬 함수를 설정할 수있다. ( clean-up ) 
}