[React] React Hooks

 

 

리액트 훅스는 클래스 컴포넌트에서만 사용할 수 있는 리액트의 특수한 기능들을 함수 컴포넌트에서도 사용할 수 있도록 도와주는 메소드들을 말한다.

 

옛날에는 클래스로만 컴포넌트를 만들었다.

 

그때는 함수 컴포넌트는 UI 랜더링만 되고 리액트 훅스의 모든 기능을 사용할수 없었다.

 

근데 클래스 컴포넌트는 문법이 너무 더러웠다.

 

그래서 여러 사람들의 필요에 의해서 함수 컴포넌트에서도 클래스 컴포넌트에서만 사용할 수 있었던 기능들을 사용할 수 있도록 리액트 훅스를 개발했다.

 

사실 지금까지 useState와 useRef는 리액트 훅이었음.

 

리액트 훅들은 기능 앞에 접두사로 use가 붙는다.

 

대략적으로 20개 정도의 훅이 존재한다.

 

리액트 훅들은 몇가지 조건이 있다.

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

2. 조건문이나 반복문 내부에서 호출 불가능

3. 커스텀 훅을 만들 수 있음

 

이제 직접 사용하면서 알아보자.

 

우리는 보통 다음과 같이 state 변수를 선언하고 상태 변화 함수를 이벤트 헨들러로 관리한다.

//HookExam.js
import React, { useState } from "react";

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

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

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

export default HookExam;

 

그런데 매번 state 변수가 필요할 때마다 선언하고 이벤트 헨들러 만들고 하는 것이 너무 소모적일 수 있다.

 

그래서 해당 부분을 별도의 함수로 만들고 그 함수를 호출하는 식으로 하는게 더 효율적일 것이라고 생각이 든다.

 

그래서 코드를 바꿔보자.

//HookExam.js
import React, { useState } from "react";

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

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

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

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

export default HookExam;

 

이렇게 하면 함수를 호출하기만 하면 되서 편하다.

 

하지만 이 코드는 틀린 코드이다.

 

리액트 훅의 조건 중 하나는 반드시 함수 컴포넌트나 커스텀 훅 에서 호출되어야 한다는 것이다.

 

따라서 useState를 함수 컴포넌트 내부나 커스텀 훅 내부에서 호출해야 한다.

 

전자는 이전부터 지금까지 살펴본 방법이다.

 

따라서 getInput 함수를 커스텀 훅으로 바꿔보자.

 

커스텀 훅을 만드는 방법은 함수의 이름 앞에 use라는 접두사를 붙여주면 된다.

 

그러면 리액트는 내부적으로 접두사로 use가 붙은 함수를 커스텀 훅이라고 판단하게 된다.

//HookExam.js
import React, { 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();

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

export default HookExam;

 

 

 

useInput 또한 함수 컴포넌트 처럼 파일을 분리할 수 있다.

 

분리하는 방법은 다음과 같다.

//HookExam.js
import React from "react";
import useInput from "./useInput";

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

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

export default HookExam;

 

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

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

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

  return [input, onChange];
}

export default useInput;

 

분리하는 방법도 함수 컴포넌트를 분리하는 방법과 동일하다.