[React] 13. React Hooks

서회정

Feb 28, 2026

Contents

1. React Hooks란 2. React Hooks 실습 1. Hook 관련 3가지 팁

1. React Hooks란

💡

클래스 컴퍼넌트의 기능을 함수 컴퍼넌드에서도 이용할 수 있도록 도와주는 메서드들을 말한다

2017년도 이전에는 리액트의 모든 기능을 사용할 수 있는

Class 컴퍼넌트를 사용하는 것이 일반적이었다.

물론 함수 컴퍼넌트도 사용할 수 있었지만 UI 렌더링만 할 수 있었다.

하지만 Class 컴퍼넌트는 문법이 복잡하기 때문에 문법이 보다 단조로운

함수 컴퍼넌트에서도 Class 컴퍼넌트에서 사용할 수 있는 기능들을 낚아채서

사용할 수 있게 하는 기능이 생겼는데 그것이 바로 React Hooks 이다.

useRef나 useState 또한 해당하는 기능을 낚아오는 Hook이다.

이러한 React Hooks는 이름 앞에 동일한 접두사인

use가 붙는데, state나 ref 외에도 use를 붙여 사용할 수 있는

다양한 기능들이 존재한다.

앞으로 계속 사용하게 될 React Hooks는

사용하기에 앞서 몇 가지 조건들을 알고 쓰는 것이 좋다.

함수 컴퍼넌트 내부에서만 호출이 가능하거나

조건문과 반복무 내부에서는 호출이 불가하다는 점,

그리고 use 접두사를 사용하여 나만의 커스텀 hook도

만들 수 있다는 것이다.

2. React Hooks 실습

먼저 component 폴더 아래에 HookExem.jsx 파일을 만들고

App.jsx 에 기존에 있던 Register를 삭제하고 그 자리에 컴퍼넌트를 호출하자.


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

export default HookExem;

1. Hook 관련 3가지 팁

1. hook의 호출 위치

💡

훅은 반드시 함수 컴퍼넌트나 커스텀 훅 내부에서만 호출할 수 있다.

useState라는 훅을 불러오고 다음과 같이 컴퍼넌트 바깥에서

호출해보자.


import { useState } from "react";

// 3가지 hook 관련된 팁
// 1. 반드시 함수 컴퍼넌트, 커스텀 훅 내부에서만 호출할 수 있다.

const state = useState();

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

export default HookExem;

그럼 다음과 같이 훅은 컴퍼넌드 함수 안에서만 호출할 수 있다는

오류 메세지가 콘솔에 출력되는 것을 확인할 수 있다.

2. hook은 반복문 조건문 내에서 호출할 수 없다

💡

훅은 반복문이나 조건문과 같은 문법 내에서 호출할 수 없다

이러한 문법 내에서 사용하게 되면 서로 다른 훅들의 호출 순서가 엉망이 되어 프로그램이 망가질 수 있다. 따라서 리액트에서는 애초에 이러한 사용을 막아 오류를 발생시켜 화면이 랜더링 되지 않게 한다.

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

사용자 입력을 저장하는 이러한 로직이 자주 사용된다면

따로 빼서 나만의 훅으로 관리할 수 있다.


import { useState } from "react";

// 3가지 hook 관련된 팁
// 1. 반드시 함수 컴퍼넌트, 커스텀 훅 내부에서만 호출할 수 있다.
// 2. 조건부로 호출할 수 없다.
// 3. 나만의 훅(Custom Hook)을 직접 만들 수 있다.

const HookExem = () => {
  const [input, setInput] = useState("");
  const onChange = (e) => {
    setInput(e.target.value);
  };

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

export default HookExem;

컴퍼넌트 위에 getInput이라는 함수를 만들고 반복되는 코드를 옮겨주자.

그 다음, 바디에서 사용될 input과 onChange만 내보내주도록 하자.

그리고 getInput 함수를 컴퍼넌트 내부에서 호출해주자.


import { useState } from "react";

function getInput() {
  const [input, setInput] = useState("");
  const onChange = (e) => {
    setInput(e.target.value);
  };

  return [input, onChange];
}

const HookExem = () => {
  const [input, onChange] = getInput();

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

export default HookExem;

이 때, getInput은 컴포넌트도 커스텀 훅도 아니기 때문에

useState라는 훅을 호출할 수 없어 오류가 발생한다.

그래서 우리는 getInput이라는 함수를 커스텀 훅으로 만들어줘야한다.

함수를 커스텀 훅으로 만드는 방법은 아주 간단하다.

함수 명 앞에 use라는 접두사를 붙여주면 된다.

호출하고 있는 쪽의 이름도 함께 바꾸는 것 잊지 말자.


import { useState } from "react";

function useInput() {
  const [input, setInput] = useState("");
  const onChange = (e) => {
    setInput(e.target.value);
  };

  return [input, onChange];
}

const HookExem = () => {
  const [input, onChange] = useInput();

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

export default HookExem;

더 이상 오류가 발생하지 않는다.

이러한 커스텀 훅은 보통 컴퍼넌트랑 같이 두지 않고,

src 경로 내에 hooks 디렉토리를 만들고 훅의 이름으로 만드는 것이 일반적이다.

작성한 커스텀 훅을 잘라와 넣어주고,

커스텀 훅 내부에서 사용하는 useState를 불러오자.

내보내는 것도 잊지 말아야 한다.


import { useState } from "react";

function useInput() {
  const [input, setInput] = useState("");
  const onChange = (e) => {
    setInput(e.target.value);
  };

  return [input, onChange];
}

export default useInput;

해당하는 커스텀 훅이 사용되는 곳에서 import 해주면 끝!


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

const HookExem = () => {
  const [input, onChange] = useInput();

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

export default HookExem;