React Hooks

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

• 과거 리액트는 거의 모든 컴포넌트를 Class 컴포넌트를 사용했음

클래스 컴포넌트 : 모든 기능을 이용할 수 있음

ex. State, Ref, …

• hooks : 낚아채다

• useState : state 기능을 낚아채오는 Hook

• 이름앞에 use 라는 접두사가 붙음

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

• 조건문, 반복문에서 호출 불가

• 나만의 hook도 제작가능

커스텀 Hook

use 접두사를 붙이면 리액트는 커스텀 훅이구나 인식

import { useState } from "react";

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

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

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

  return [input, onChange];
}

const HookExam = () => {
  const [input, onChange] = useInput();
  return (
    <div>
      <input value={input} onChange={onChange} />
    </div>
  );
};

export default HookExam;

여러번 반복도 가능!

import { useState } from "react";

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

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

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

  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;

위치

보통 컴포넌트랑 같은 위치에 두지는 않고, hooks라는 별도의 폴더를 만들어서 hook의 이름으로 보관하는게 일반적

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