[React] 5. Hook

리액트는 과거 버전에서 UI를 만들 땐 Function 컴포넌트 , 기능을 만들 땐 Class 컴포넌트로 분류하여 작성하였으며 

 

당시에는 State , Ref 라는 기능으로 사용이 되었으나 

이제는 Hook 을 통해 Class 컴포넌트로 사용되던 기능들을 낚아채 Function으로 가져간다는 의미로 Hook 이라고 부른다.

 

 

Hook 으로 만들어진 것들은 모두 use 가 앞에 붙는 형태로 이루어져 있습니다.

 

(useState , useRef 등등)

(단, 이런 Hook 들은 함수 컴포넌트 내부에서만 호출 가능, 조건문(반복문) 내에선 불가능함. )

 

또한 기존의 State , Ref가 아닌 내가 필요로 하는 기능을 제작해 만들 수 있는데 이걸 Custom Hook이라 부른다.

 

 

예시로 

import { useRef, useState } from 'react'
import './App.css'
import InputText from './Hook/InputText'
function App() {

  return (
    <div>
      <InputText/>
    </div>
  )
}

export default App

import { useState } from "react";


const InputText = (text) => {
    const [input, setInput] = useState("");

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

    return (
        <div>
            <input type="text" value={input} onChange={onChangeText}/>
            {input}
        </div>
    )
};

export default InputText;

 

이렇게 코드를 짜도 되지만 이러면 결국 기능 , 화면이 섞여버려서 기능 , 코드 보기에 불편하다는 문제가 있어서

InputText 파일을 한번 더 쪼개면 

 

 

import { useState } from "react";
import useInput from "../Hook/useInput";

const InputText = (text) => {
    const [input, onChangeText] = useInput("");

    return (
        <div>
            <input type="text" value={input} onChange={onChangeText}/>
            {input}
        </div>
    )
};

export default InputText;

 

 

import { useState } from "react";


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

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

    return [input,onChange];
}

export default useInput;

 

이렇게 짜면 Hook을 통해 내가 만든 useInput 이라는 기능으로 

호출 할 때 setInput 이 아닌 onChangeText를 넣어 동일하게 실행이 가능하다.