[리액트] Hook함수란?

본 내용은 아래 강의에 대한 복습내용입니다.

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

 

---

 

 

2017년 이전의 리액트 현재처럼 함수 컴포넌트가 아닌 대부분 클래스 컴포넌트를 만들었다.

이때 클래스컴포넌트에서 리액트의 대부분의 기능(State,Ref 등)이 사용되었고 함수 컴포넌트에서는 UI렌더링만 주로 담당했다.

그런데 이제는 함수 컴포넌트에서도 이러한 기능들을 사용할 수 있게 되었다.

그래서 현재는 대부분 함수 컴포넌트를 사용하고, 기존의 클래스 컴포넌트에서 사용하던 기능들을 함수 컴포넌트에서도 낚아 가져와 쓸 수 있게 하는 것이 바로 Hook 함수다.

 

*리액트에서 Hook함수는 use~로 시작하는 특징이 있다.

 

---

 

리액트 hook함수는 아래와 같은 세가지 특징을 지닌다.

 

1.함수 컴포넌트 내부에서만 호출이 가능하다.

 

아래 보면 함수 컴포넌트 바깥에 hook함수인 useState를 호출하려하는데 에러가 발생한다.

2.조건문이나 반복문 안에서는 hook함수 호출이 불가하다.

 

3.나만의 커스텀 훅을 만들 수 있고, 커스텀 훅안에서는 또 훅함수 호출이 가능하다.

아래와 같은 컴포넌트가 있다.

그리고 다른 컴포넌트도 필요하고 아래처럼 동일하게 이벤트 핸들러 함수가 들어가야한다면

useState를 사용하고 onChange 이벤트 핸들러함수도 정의하는 부분이 동일하게 각각의 컴포넌트에 들어가야할 것이다.

이거를 커스텀 훅으로 정의해 쉽게 처리할 수 있다.

import {useState} from "react"

const HookExam = () =>{

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

    const onChange = (e) =>{

        setInput(e.target.value);

    };

   

    return (

    <div>

       <input value={input} onChange={onChange} />

    </div>

    );

};

export default HookExam;

 

 

커스텀 훅을 만들기 위해서는 use로 시작되는 이름으로 지으면 된다.

useInput이라 명명하고 useState를 사용하고 onChange 이벤트핸들러함수를 정의하는 부분을 따로 뺐다.

여기서 useInput이라 명명했기에 커스텀 훅이라고 리액트는 받아들여서 이 내부에서 useState()라는 hook함수 사용이 가능한 것이다.

import {useState} from "react"

 

const useInput = () =>{

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

    const onChange = (e) =>{

        setInput(e.target.value);

    };

    return [input,onChange];

}

const HookExam = () =>{

    const [input,onChange] = useInput();

   

    return (

    <div>

       <input value={input} onChange={onChange} />

    </div>

    );

};

export default HookExam;

 

 

그런데 보통은 이러한 커스텀 훅함수는 아래처럼 따로 폴더와 파일로 분리한다.