6. React Hooks

[ React Hooks ] 

클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드들

 

● useState : State 기능을 낚아채오는 Hook

● useRef : Reference 기능을 낚아채오는 Hook

등등의 다양한 훅이 존재함 

 

< 특징 >

● 함수 컴포넌트 내부에서만 호출 가능

● 조건문, 반복문 내부에서는 호출 불가 ( 서로다른 훅들의 호출 순서가 엉망이 되는 경우도 발생 )

● 나만의 Hook도 제작 가능 (Custom Hook)

 

 

import { useState } from "react";

// 3가지 hook 관련 팁
// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능
// 2. 조건부로 호출될 수는 없다
// 3. 나만의 훅(Custom Hook) 직접 만들 수 있다

const HookExam = () => { 
    const [input, setInput] = useState(); 

    const onChange = (e) => {
        setInput(e.target.value);
    }

    return (
        <div>
            <input value={input} onChange={onChange} />
        </div>
    )
};

export default HookExam;

 

여기서 보면 input을 관리하는 코드가 너무 길다.

늘어날수록 중복 코드가 더 많아지기 때문에 별도의 함수로 만들면 훨씬 깔끔해질 것 같음

 

hooks/useInput.jsx 파일을 만들어서 아래 코드 작성

import { useState } from "react";

function useInput(){
    const [input, setInput] = useState("");

    const onChange = (e) => {
        setInput(e.target.value);
    };

    return [input, onChange];
}

export default useInput;

 

함수 앞에 use~를 붙여서 만들면 Custom Hook을 만들 수 있고

컴포넌트 내부에 훅을 사용해서 반복되는 로직을 분리할 수 있다.

 

그리고 HookExam.jsx에는 

import useInput from "../hooks/useInput";

// 3가지 hook 관련 팁
// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능
// 2. 조건부로 호출될 수는 없다
// 3. 나만의 훅(Custom Hook) 직접 만들 수 있다

const HookExam = () => { 
    const [input, onChange] = useInput(); 
    const [input2, onChange2] = useInput();

    return (
        <div>
            <input value={input} onChange={onChange} />
            <input value={input2} onChange={onChange2} />
        </div>
    )
};

export default HookExam;

 

물론 Custom Hook은 여러번 반복해서 사용할 수 있다.