[React] Hooks

- 리액트의 '훅(Hooks)'이란 무엇일까 -

리액트의 `훅(Hooks)`은 함수형 컴포넌트에서 `State`와 `생명주기` 기능을 사용할 수 있게 해주는 기능이며 훅을 사용하게 되면 클래스형 컴포넌트에서만 사용할 수 있었던 기능을 함수형 컴포넌트에서도 사용할 수 있습니다. (리액트 16.8 버전에서 도입되었고 코드가 간결해지며 이해가 쉬워집니다.)

- 'Hooks'의 규칙 -

1. 최상단의 위치에서만 호출해야 합니다.

   • 반복문이나 조건문 또는 중첩된 함수 내에서 훅을 호출하면 안됩니다.
     
     
   • 리액트의 훅은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 내에서
     실행하게 될 경우 해당 부분을 건너뛰는 문제가 발생할 수 있기 때문에
     순서가 꼬이고 버그가 발생할 우려가 있습니다.
     
     
   • 따라서 이 규칙을 따르면 useState(함수형 컴포넌트에서 상태 관리)와
     useEffect(컴포넌트 렌더링 후 특정 작업 수행)가 여러번 호출되는 경우에도
     Hook의 상태를 올바르게 유지할 수 있습니다.

2. 리액트 함수 내에서만 호출해야 합니다.

   • 일반적인 JS 함수처럼 호출될 경우 리액트의 상태 관리 및 렌더링 주기와
     충돌할 수 있기 때문에 'Hook'은 일반적인 JS 함수에서는 호출하면 안됩니다.
     
     
   • 함수형 컴포넌트나 커스텀 훅에서는 호출이 가능합니다.
     (커스텀 훅 : 함수 이름 use로 시작 & JS 함수의 종류 중 하나)

- 리액트 훅의 종류와 사용법 -

1. useState

가장 기본적인 훅이며 컴포넌트 내에서 상태 관리를 해야할 일이 발생 시 사용합니다.

const [state, setState] = useState(initialValue);

• 위의 코드에서 useState 훅은 두 개의 값을 반환하는데 첫 번째 값은
  현재 상태(state) 두 번째 값은 상태를 업데이트하는 함수(setState)입니다.

• initialValue는 상태의 초기 값입니다.

2. useEffect

기존 클래스형 컴포넌트에서 사용했던 componentDidMount,
componentDidUpdate, componentWillUnmount를 하나의 API로
통합한 것으로 아래와 같은 특징들을 가집니다.

• useEffet는 기본적으로 useEffect(function, deps)의 형태를 사용합니다.

• funtion에는 실행시킬 함수를 넣고 deps에는 의존성 배열을 담습니다.

• 의존성 배열에 어떤 것이 담기는지에 따라 부수적인 효과 함수가 실행됩니다.

• 가장 먼저 의존성 배열 없이 useEffect를 실행시키게 되면
  페이지가 렌더릴 될 때마다 데이터를 불러오게 됩니다.

import React from 'react';

React.useEffect(() => {
  dispatch(getActions.getFundingAC(page));
});

• 두 번째로 의존성 배열에 빈배열을 담아주게 될 경우
  첫 렌더링을 할 때에만 함수를 실행합니다.

import React from 'react';

React.useEffect(() => {
  dispatch(getActions.getFundingAC(page));
}, []);

• 마지막으로 의존성 배열에 State 값이나 props로 상속 받은 데이터 값
  등을 담아주게 되면 해당 값이 변할 때 마다 함수를 실행합니다.

import React from 'react';

const [page, setPage] = React.useState(1)

React.useEffect(() => {
  dispatch(getActions.getFundingAC(page));
}, [page]);

3. useRef

특정 DOM에 접근하여 DOM 조작을 가능하게 하는 훅이며 리액트 프로젝트에서도 특정한 요소를 선택하는 상황이 생길 수 있는데 이러한 상황에서 useRef 함수를 사용할 수 있습니다.

import React, { useRef } from 'react';

const FocusInput = () => {
// useRef를 사용하여 입력 요소에 대한 Ref 생성
const inputRef = useRef(null);

const focusInput = () => {
  // current 프로퍼티(자산)를 통해 실제 DOM 요소에 접근하여 포커스 설정
  inputRef.current.focus();
};

return (
  <div>
    <input ref={inputRef} type="text" placeholder="클릭하여 포커스"/>
    <button onClick={focusInput}>입력창에 포커스</button>
  </div>
);
};

export default FocusInput;

4. useMemo, useCallback

• useMemo와 useCallback은 모두 같은 입력에 대한 반복적인 계산을 방지하는
  최적화 기법인 Memoization과 관련이 있어 리액트를 사용하며 성능 개선을 위해
  많이 사용됩니다.
  
  
• 따라서 useMemo 또는 useCallback 훅을 적절히 사용하면 중복 연산을
  피할 수 있어 애플리케이션의 성능을 최적화할 수 있다는 장점이 있습니다
  
  
• useMemo와 useCallback은 비슷한 동작을 하긴 하지만 두 가지의 차이점도
  존재하는데 먼저 useMemo의 경우에는 Memoization된 값을 반환하는 훅이고
  useCallback은 Memoization된 함수를 반환한다는 차이점을 갖습니다.

참고한 블로그 링크
리액트의 훅이란?
리액트 훅의 종류