React Hooks란
클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메소드들을 말한다.
과거에 리액트는 Class컴포넌트를 사용하여 개발을 하였다.
Class 컴포넌트는 리액트의 모든기능을 사용할 수 있었는데
ex) State, Ref, etc....
Function 컴포넌트는 UI 렌더링만 할 수 있었다
문법이 복잡하여 Fuction 컴포넌트에서도 State, Ref 등을 사용할 수 있도록 개발을 한것이
Hooks기능을 개발하게 되었다.
※리액트 Hook들은 함수 컴포넌트 내부에서만 호출 가능하고 조건문, 반복문 내에서는 호출이 불가 하다.
나만의 Hook도 제작이 가능하다(Custom Hook)
컴포넌트 내부에서 호출했을 경우
import { useState } from "react"
// 3가지 hook 관련된 팁
// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능
const State = useState();
const HoolExam = () => {
return(
<div>hookexam</div>
)
}
export default HoolExam
Hook은 이런식으로 함수 밖에 호출을 시도하게되면
이런식으로 오류가 발생한다.
브라우저에서도 확인이 가능하다.
import { useState } from "react"
// 3가지 hook 관련된 팁
// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능
const HoolExam = () => {
const State = useState();
return(
<div>hookexam</div>
)
}
export default HoolExam
그래서 반드시 Hook은 컴포넌트 내부에서만 호출을 해줘야 한다.
조건문 또는 반복문에서 호출 했을경우
import { useState } from "react"
// 3가지 hook 관련된 팁
// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능
// 2. 조건부로 호출될 수는 없다.
const HoolExam = () => {
if(true){
const State = useState();
}
for(let i = 0 ; i <10; i++ ){
const State = useState();
}
return(
<div>hookexam</div>
)
}
export default HoolExam
이렇게 오류문구가 출력이 된다.
리액트가 컴포넌트 를 화면에 렌더링할때 조건문이나 반복문 안에 훅을 호출했을 경우 서로 다른
훅들의 호출순서가 엉켜버려 내부적인 오류가 발생할 수 있기때문이다.
나만의 훅 (Custom Hook)
import { useState } from "react"
// 3가지 hook 관련된 팁
// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능
// 2. 조건부로 호출될 수는 없다.
// 3. 나만의 훅(Custom Hook) 직접 만들 수 있다.
const useInput=()=>{
const [input, setInput] = useState("");
const onChage = (e) =>{
setInput(e.target.value)
}
return [input, onChage]
}
const HoolExam = () => {
const [input, onChage] = useInput();
return(
<div>
<input value={input} onChange={onChage} />
</div>
)
}
export default HoolExam
컴포넌트 밖에 훅을 호출하게되면 오류가 발생하는데 그것을 나만의 훅(Custom Hook)으로 만들게되면
오류를 출력하지 않게된다
나마의 훅으로 설정하는 방법은 컴포넌트 밖에 function을 만들어주고 function의 이름을 use로 시작한다면
리액트가 Hook으로 인식하게 된다.
커스텀 훅을 컴포넌트에 파일에 관리 하는것이 아닌 hooks폴더를 만들어 hooks폴더안에서 관리하게 된다.
components/HookExam.jsx
import useInput from "../hooks/useInput";
// 3가지 hook 관련된 팁
// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능
// 2. 조건부로 호출될 수는 없다.
// 3. 나만의 훅(Custom Hook) 직접 만들 수 있다.
const HoolExam = () => {
const [input, onChage] = useInput();
return(
<div>
<input value={input} onChange={onChage} />
</div>
)
}
export default HoolExam
hooks/useInput.jsx
import { useState } from "react";
const useInput=()=>{
const [input, setInput] = useState("");
const onChage = (e) =>{
setInput(e.target.value)
console.log(e.target.value)
}
return [input, onChage]
}
export default useInput
이렇게 Coustom Hook과 Components 파일들을 관리를 한다.