[React.js] React Hooks

클래스 컴포넌트의 기능을 함수 컴포넌트에서 사용할 수 있도록 도와주는 메서드

 

과거에는 클래스 컴포넌트만 모든 기능을 이용할 수 있었고, 함수 컴포넌트는 UI 랜더링만 가능했었음

→  근데 클래스 컴포넌트는 문법이 있어서 코드가 복잡

 

훅의 예시

 

1.useState

https://mm-study-front.tistory.com/38

[React.js] State

 

2.useRef

https://mm-study-front.tistory.com/42

[React.js]useRef

 

등등 use가 붙는 함수들

 

---

훅의 특징 

 

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

 import { useState } from "react";

 const state = useState();

 

이 경우에 에러 발생

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

 

 

2. 조건부로 호출될 수 없음

→ 리액트가 렌더링 할 때 조건문 내부에 있으면 호출순서가 엉망이 돼 내부 순서 오류 발생

 if (true) {

     const state = useState();

   }

 

비주얼코드 확장 프로그램 깔면 오류라고 나옴

React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render

 

 

3. 나만의 훅 만들 수 있음

 

굉장히 쉬움 함수이름 앞에 use라고 치면 끝!

주로 커스텀 hook은 같은 파일로 두지 않고 따로 폴더를 만들어서 관리하는 경우가 많음