React Hooks - 리액트 훅이란 뭘까?

 

 

React Hooks 

=> class component의 기능을 함수 컴포넌트에서도 이용할수있도록 한것 ! 

 

 

이전에는 (2017년 이전) 

class component에서만 사용할수있었던 리액트의 state, ref ... 기능을 

Hook(훅)낚아채와서 function component에서도 사용할수있게 한것입니다 ! 

 

 

ex) 

useState , useRef 

=> 접두사로 use를 쓴다는 공통점이 있어요 

 

---

 

 

 

특징 ! 

 

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

2) 조건문, 반복문 내 사용이 불가합니다. 

3) 나만의 Hook 제작이 가능하다 ( custom Hook) 

 

 

 

---

 

( 예시 코드 )

 

HookExam.jsx 

=> 커스텀 훅 - useInput을 만들어 import하여 사용하는 코드입니다. 

// custom hook 만드는 법 -> 앞에 use를 붙여주기 
import useInput from "../hooks/useInput";


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

// 여기서  useState 호출하면 오류남 
// 함수 컴포넌트 (여기서 HookExam) 안에서만 호출해야해요 




const HookExam = () =>{
    const [input, onChange] = useInput();
    // use로 시작하는 함수를 만들어 커스텀 훅을 제작

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

export default HookExam;

 

 

커스텀 훅을 만드는 경우에는 src 밑에 hooks라는 폴더를 따로 만들어 관리해줍니다.

 

 

hooks / useInput.jsx 

import { useState } from "react";

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

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

    // 구조분해 할당
    return [input, onChange];
}

export default useInput;

 

useState 를 onChange까지 한번에 useInput이라는 커스텀 훅을 만들어줍니다. 

return 값에는 구조분해 할당을 통해 useState와 유사하게 

첫번째에는 값, 두번째에는 변경하는 함수를 반환해줍니다. 

 

 

 

리액트 훅이 뭔가했더니 

이제 조금 알겠다 ~ 

근데 2017년 이전에 있었던 기능을 함수 컴포넌트에도 적용시킨거라는 의미를 잘 모르겠다 

그 이전에는 classComponent라고 하는데 이게 뭔말일까 나중에 찾아봐야겠다. 

 

 

 

 

오랜만에 쳇베이커 재즈를 들으면서 글 작성중 ㅎㅎ