리액트 Hook

리액트 훅(React Hook)은 함수 컴포넌트에서 리액트가 제공하는 다양한 기능을 사용할 수 있도록 도와주는 메서드를 말한다.

 

- useState,useRef,useEffect 등이 이에 해당한다.

 

- 모든 리액트 훅은 공통적으로 접두사 ‘use’가 붙는다.

 

- 여러개의 Hook들을 묶어서 React Hooks라고 부른다.

 

 

 

기존의 class 컴포넌트들만 사용할 수 있었던 리액트의 기능을 Hooking 하듯 낚아채서 함수 컴포넌트에서도 동일하게 쓸 수 있도록 만들어주기에 React Hooks라는 이름을 붙임

 

리액트는 원래 클래스 문법으로만 컴포넌트를 만들 수 있었다 함수로도 만들 수는 있었지만 아무런 기능도 못쓰고 UI만 렌더링 할 수 있었다.

 

클래스 컴포넌트 : 문법이 복잡하고 코드 양이 많음

함수 컴포넌트 : 문법이 간결하고 코드 양이 짧음 

 

 

 

 

Custom Hooks

 

위의 리액트 Hooks를 입맛대로 커스텀하는 기능을 말한다.

 

 

React Hooks는 일반 함수에서 호출할 수 없으며,

- 컴포넌트의 내부

- 또 다른 React Hook(Custom Hook 포함)

에서만 호출 할 수 있다.

 

 

컴포넌트의 로직을 함수로 분리하기 위해서는, 모듈 같이 일반 함수로 만드는 건 불가능하고, Custom Hook을 만들어 로직을 분리하면 된다. 

 

커스텀 훅을 만드는 방법은 간단하다. 그냥 똑같이 js 함수를 만들면 된다. 단 함수의 이름을 지을 때 리액트 Hooks의 이름처럼 use..을 붙여야 한다.ex) useUpdate, useExample

 

즉 일반 함수 모듈에서 이름만 use로 바꿔도 리액트 훅이 된다.

 

 

 

const isMountRef = useRef(false);

  useEffect(()=>{
    if(!isMountRef.current){
      isMountRef.current = true;
      return;
    }
    cb()
  })

 

위의 코드를 그냥 update.js로 만들면 안되지만 useUpdate.js로 만들면 커스텀 훅이 되어서 사용할 수 있다. 그리고 필요한 곳에서 useUpdate를 호출하면 된다.  

 

 

 

 

만약 input 값을 받는 로직을 분리한다면

import { useState } from "react";

export default function useInput(){
  const [value, setValue] = useState();

  const onChangeValue = (e) =>{
    setValue(e.target.value);
  }

  return [value, onChangeValue];
}

 

위처럼 useInput 커스텀훅을 만든다.. 그리고 value 값과, onChangeValue값을 return 해준다.

 

 

 

이후 useInput로직이 필요한 컴포넌트에서 

const [text, onChangeText] = useInput();

구조분해 할당을 통해 useInput에서 반환하는 value와 onChangeValue를 받아와서 사용하면 된다.

 

 

 

 

컴포넌트 폴더를 분리해서 관리하듯, Hooks도 마찬가지로 폴더를 분리해서 커스텀 훅을 넣자