리액트 hooks 모음

0. 배경지식

• 리액트에서 함수형 컴포넌트의 사용을 권함
  -> 함수형 컴포넌트에서도 상태관리를 할 수 있도록 hooks 개발

• 비구조화 할당

const [a, b, ...rest] = [10, 20, 30, 40, 50]
// a:10, b:20, c:[30, 40, 50]

1. useState

기존의 setState 역할 - 컴포넌트 상태관리

import React, { useState } from 'react';

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

<button onClick={() => setCount(count + 1)}></button>
// state 유지됨

2. useEffect

기존의 componentDidMount() 역할 - sideEffect 관리

import React, { useEffect } from 'react';

useEffect(() => {
    alert('DOM렌더링 완료!')
  });
// 주요특징은 state에 접근이 가능

3. useCallback

기존의 shouldComponentUpdate() 역할 - 불필요한 리렌더링 방지

import React, { useCallback } from 'react';

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);
// a,b의 값의 변화가 감지될 때야 리렌더링