[React] React Hook

🍃 2017년 이전의 React

---

• Class 컴포넌트
  • 모든 기능을 이용할 수 있음(state, ref…)
  • 문법이 복잡함
• Function 컴포넌트
  • UI 렌더링만 할 수 있음
  • 문법이 간단함

✔️ React Hooks

---

• React Hook(낚아채오기) 덕분에 Class 컴포넌트에서만 쓰던걸 Funtion 컴포넌트에서 쓸 수 있게됌

• 굳이 문법이 복잡한 Class 컴포넌트를 사용할 필요가 X

• useState는 State 기능을 낚아채오는 Hook

• useRef는 Reference 기능을 낚아채오는 Hook

🍃 특징

• 이름 앞에 동일한 접두사 use가 붙음
• 함수 컴포넌트 내부에서만 호출 가능
• 조건문, 반복문 내부에서는 호출 불가
• use 접두사를 사용해서 Custom Hook 제작 가능

🌙 Hooks

1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능
   1. 함수바깥에서 use~를 호출하면 오류 발생
2. 조건부로 호출할 수는 없다
   1. 반복문 내부에서 훅을 호출하게 되면, 서로 다른 훅들의 호출 순서가 엉망이 되어버리는 현상이 발생해서 오류 발생 가능
3. Custom Hook을 직접만들 수 있음

🌙 Custom Hooks

function getInput() {
	const [input, setInput] = useState(""); // 오류 발생

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

	return [input, onChange];
}

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

input을 만들때마다 입력값을 받기위해 input, onChange를 작성하고 가져와서 달아야함

⇒ 번거롭다!

근데 이 코드는 오류가 발생함

React Hooks는 React 컴포넌트 내부이거나, Custom Hook 내부에서만 호출가능하기때문

이건 일반 js 내부

🍃 Custom Hook 작성

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

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

	return [input, onChange];
}

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

함수 앞에 use라는 접두어만 써주면 됌! ⇒ Custom Hook 완성

컴포넌트마다 반복되어서 동작하는 로직

커스텀 훅을 만들어서 분리해줄 수 있음

여러번 반복해서 사용 가능

보통 컴포넌트랑 같은 파일에 두진않고, src 디렉토리 아래에 hooks라는 별도의 폴더를 만들어서 Hook의 이름으로 파일을 두는게 보통!

import {useState} from "react";

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

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

	return [input, onChange];
}

export default useInput;

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

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

참고

---

• React 함수 컴포넌트
  • React에서 UI를 구성하는 주요 요소
  • 함수 컴포넌트는 함수 형태로 작성되며, React 요소를 반환
• 일반 JavaScript 함수
  • JavaScript에서 함수는 코드를 묶어 재사용 가능한 블록으로 만드는 데 사용