[React] Hooks 완벽정리

 

React Hooks

리엑트 훅이란 리엑트 16.8 버전에서 새롭게 소개된 기능이다. 훅을 이용하면 클래스를 작성할 필요 없이 리엑트의 기능들을 사용할 수 있게 된다. 훅이란 함수 컴포넌트가 리엑트 상태나 라이프사이클 기능으로 '걸려들어가는' 함수들을 말한다. 클래스 안에서는 작동하지 않는다.

 

훅은 backward-compatible이라서 기존의 기능을 파괴하지 않는다. 여기서 backward-compatible이란 이전의 시스템과 상호작용하는데 문제가 없는 특성을 가르킨다. 또한 기존의 리엑트 개념과도 다르지 않다. 

React Rules

• 훅은 리엑트 함수의 최상단에서 호출되어야 한다.
• 훅은 리엑트 함수에서만 호출 가능하다. (일반 자바스크립트의 함수로 훅을 호출하는 것은 안되나, 커스텀 훅을 이용한 호출은 가능하다)

Hooks State

state 훅은 리엑트 앱에서 state를 선언하는 데 사용된다. useState() 통해 함수형 컴포넌트에서 state를 설정하거나 회수할 수 있는데 useState()는 두 개의 엘리먼트를 반환한다. 첫 번째 엘리먼트는 현재의 state 값 혹은 초기값이고, 두 번째 엘리먼트는 state를 업데이트하는 함수다. 

Hooks Effect

effect 훅은 함수형 컴포넌트에서 사이드 이펙트를 발생시키는 훅이다. 여기서 사이드 이펙트란 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 두 번째 파라미터로 설정된 값에 따라 컴포넌트가 랜더링 될 때마다 effect 훅은 발동해 외부의 값이나 상태를 변경시킬 수 있다.

Hooks Context

Context 훅은 간단히 말해 Redux의 상태관리 기능을 할 수 있는 훅이다. 리엑트는 상위 컴포넌트에서 하위 컴포넌트로 props를 넘겨줌으로써 데이터를 넘겨줄 수 있지만 하위 컴포넌트에게 전달하기 위해 현재 컴포넌트에서 사용하지도 않는 props를 넘겨받아야 하는 불편함이 있다. Context 훅은 createContext()로 객체를 생성해 export 하고 Provider를 통해 하위 컴포넌트를 감싸주면 하위 컴포넌트에서는 생성된 객체를 import 해서 useContext() 훅으로 해당 데이터를 사용할 수 있게 된다.

Hooks Memo

Memo 훅은 이름이 의미하는대로 메모한 값을 활용하고자 할 때 이용하는 훅이다. 요즘은 컴퓨터의 성능이 좋아 여러 번 렌더링을 하더라도 유저에게 큰 불편을 초래하지 않지만 만약 정말 복잡한 연산이 요구되는 함수가 있는데 해당 함수가 다른 컴포넌트 리렌더링에 의해 계속해서 호출된다면 성능에 영향을 미칠 수 있다. 따라서 useMemo() 훅을 이용하면 의존성 배열에 넘겨준 값이 변경되었을 때만 메모리제이션 된 값을 다시 계산하도록 설계할 수 있다. 언듯 보면 useRef 혹은 useCallback과 비슷하다고 생각될 수 있는데 useMemo() 훅의 특징은 함수의 return값을 기억한다는 점이다. 

Hooks Callback

Callback 훅은 의존 배열의 값이 변경되었을 때에만 함수를 생성하도록 하는 훅이다. 성능에 지대한 영향을 미치지는 않지만 함수 컴포넌트는 리렌더링 될 때마다 함수를 매번 다시 생성한다. Callback 훅은 이런 낭비를 막을 수 있다. 따라서 useCallback() 훅은 함수 자체를 기억한다.

Hooks Ref

Ref 훅은 특정 DOM을 가르킬 때 사용하는 훅이다. 

아래 블로그에 설명이 잘 되어 있어 내용을 가져와봤다. 

 

import React, { useRef } from "react";

const App = () => {
  // 1. Ref객체 만들기
  const here = useRef();
  2. focus( ) DOM API 호출
  setTimeout(() => here.current.focus(), 3000);
  return (
    <div>
      <h1>Hello</h1>
      // 2. 원하는 곳에 ref 값으로 설정하기
      <input ref={here} placeholder="how are you" />
    </div>
  );
};

export default App;

1) useRef( )를 사용해 Ref객체 만들기
2) 해당 객체를 활용한 작업 설정 .current.focus()
3) 만든 Ref객체를 선택하고 싶은 DOM에 ref 값으로 설정하기
-> Ref객체의 .current값은 선택한 DOM을 가리키게 된다!
+) useRef에 파라미터를 넣어주면, 이 값이 .current의 기본 값이 된다!

 

출처: https://velog.io/@suuhyeony/React-useRef-useEffect

[리액트] useRef, useEffect