리액트 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도 마찬가지로 폴더를 분리해서 커스텀 훅을 넣자