#
@M

리액트 훅

  • 함수형 컴포넌트에서 사용할 수 없던 작업들을 가능하게 해주는 기능. (v16.8에서 도입됨.)
  • hooks를 도입하게된 동기. 클래스 컴포넌트를 사용할 때 나타나는 다양한 문제들이 소개되어 있다: ko.reactjs.org/docs/hooks-intro.html#motivation

useState

  • 원래 함수형 컴포넌트는 stateless했는데, useState를 쓰면 state를 사용할 수 있다.
import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
  • 상태가 여러개라면 useState를 여러개 사용하면 된다.
const [count, setCount] = useState('');
const [name, setName] = useState('');

useEffect

  • 컴포넌트가 렌더링 될 때마다 특정 동작을 수행하도록 하는 hook.
  • 클래스 컴포넌트의 componentDidMount와 componentDidUpdate를 합쳤다고 생각하면 됨.
import React, { useState, useEffect } from 'react';

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

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
  • 마운트될 때만 실행하고, 리렌더링할 때는 실행하고 싶지 않다면 두번째 인자로 빈 배열을 주면 된다.
useEffect(() => {
  console.log('Mounted');
}, []);
  • 특정 값이 업데이트 될 때만 실행하려면 두번째 인자로 검사할 값을 넣어주면 된다.
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

참고자료

이 문서를 인용한 문서