React] 리액트 Hook

State Hook

import React, { useState } from 'react';

function Example() {
  // count 라는 새 상태 변수를 선언합니다.
  // count는 단순히 변수명이기 때문에 어떠한 변수명이어도 상관없습니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        클릭하면 1을 더합니다.
      </button>
    </div>
  );
}
//리액트 공식문서의 코드를 참고하였습니다.

위의 예제에서 UseState가 Hook입니다.

UseState는 현재의 state값과 이 값을 업데이트하는 함수를 쌍으로 제공합니다.

useState는 인자로 초기 state값을 하나 받습니다.

위의 초기값은 0을 넣어줬습니다. (useState(0))

useState는 하나의 컴포넌트 내에서 여러 개 사용할 수 있습니다.

---

Effect Hook

 

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

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

  // componentDidMount, componentDidUpdate와 비슷합니다
  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
// 리액트 공식문서의 코드를 참고하였습니다.

useEffect를 사용하면, React는 DOM을 바꾼 뒤에 effect 함수를 실행할 것입니다.

Effects는 컴포넌트 안에 선언되어있기 때문에 props와 state에 접근할 수 있습니다.

매 렌더링 이후에 effects를 실행합니다.

useState와 마찬가지로 컴포넌트 내에서 여러 개의 effect를 사용할 수 있습니다.

---

사용 규칙

Hook은 두가지 규칙을 준수해야 합니다.

1. 최상위에서만 Hook을 호출해야 합니다.
2. React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다.