[React] 📖 React Hooks

📍 React Hooks란?

클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있는 React의 특수한 기능들을 함수 컴포넌트에서도 사용할 수 있도록 도와주는 메서드들
(함수 컴포넌트에서도 클래스 컴포넌트의 기능을 마치 낚아채듯이(hook) 가져와서 사용할 수 있게 해준다)

📍 React Hooks 종류

1. useState ➡️ State 라는 기능을 낚아채오는 Hook
2. useRef ➡️ Reference 라는 기능을 낚아채오는 Hook
3. useEffect
4. useReducer
   등등

📍 React Hooks 특징

• React Hooks에는 이름 앞에 use라는 접두사가 붙는 특징이 있다.
• 컴포넌트 내부에서만 호출 가능
• 조건문, 반복문 내부에서는 호출 불가
• use 라는 접두사를 이용해서 직접 나만의 새로운 Hook인 Custom Hook을 만들 수 있다.

📍 예시

1. HookExam 파일 생성

HookExam.jsx

const HookExam = () => {
    return <div>HookExam</div>;
};

export default HookExam;

2. App.jsx에서 호출

App.jsx

import "./App.css";
import Register from "./components/Register";
import HookExam from "./components/HookExcam";


function App() {
  return (
    <>
      <HookExam/>
    </>
  );
}

export default App;

---

📍 3가지 hook 관련된 팁

1. 함수 컴포넌트, 커스텀 훅, React 함수 내부에서만 호출 가능

이렇게 작성하면 state가 외부에 있어서 오류 표시가 떠야하는데 오류가 안떠서 당황 ;; 혹시 몰라서 브라우저 콘솔창 확인했더니

Invalid hook call. Hooks can only be called inside of the body of a function component.
후 ~ 이제 마음이 편안해진다.
오류를 해결하기 위해서는 const state = useState(); 를 함수 컴포넌트 안에 넣어주면 된다.

import { useState } from "react";

const HookExam = () => {
    const state = useState();
    
    return <div>HookExam</div>;
};

export default HookExam;

2. 조건부로 호출될 수 없다.

조건부로 호출 : 조건문이나 반복문 내부에서 hook이 호출된다.

왜?

: React가 내부적으로 컴포넌트들을 호출해서 화면에 렌더링할 때 이런 조건문과 반복문 내부에서 hook을 호출하게되면 서로 다른 hook들의 호출 순서가 엉망이 되어버리는 현상이 발생 ➡️ 내부적인 오류가 발생

3. 나만의 훅(Custom Hook)을 직접 만들 수 있다.

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

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

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

위의 내용을 custom hook로 만들어보기 !

import { useState } from "react";

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

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

    return [input, onChange];
}


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;

그냥 함수 앞에 use만 붙이면 custom hook이 완성된다.
(근데 use대신 get을 써도 오류가 안나,,, react 레퍼런스 보면 되는게 맞을 것 같기도하고 아닌 것 같기도 하고,,, help.....)

---

📍 Custom Hooks 보관 방법

보통 scr 디렉토리 아래에 Hooks 라는 별도의 폴더를 만들고 여기에 Hook의 이름으로 보관한다.