[React] React Hooks

React Hooks?

• 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드를 의미한다.

React Hook 특징

• 이름 앞에 동일한 접두사 use가 붙는다.
• 각각의 메서드를 Hook이라고 부른다
• 함수 컴포넌트, Custom Hook 내부에서만 호출이 가능하다.
• 조건문, 반복문 내부에서는 호출이 불가능하다.
• 나만의 훅(Custom Hook)도 제작 가능하다.

React Hooks 사용

• input을 관리하는 코드가 길고, HookExam 같은 컴포넌트가 많아지게 된다면 각각의 컴포넌트들마다 State를 생성하고 이벤트 핸들러를 만드는 코드를 중복으로 매번 작성해야 한다.

• 코드 개선을 위해 별도의 함수로 생성하면 코드가 간결해지고 깔끔해진다.
  → Custom Hook을 사용해서 분리한다.

Custom Hook(나만의 훅) 만들기

• 함수명 앞에 접두사 use를 붙인다.
• hooks 폴더로 분리하여 관리한다.
  

→ Custom Hook를 통해 컴포넌트 내부에 반복되는 로직과 훅을 사용하는 로직을 분리할 수 있다.

Custom Hook 불러오기

• 해당 Custom Hook 컴포넌트를 import를 통해 불러온다.
  

강의 출처:
https://www.inflearn.com/course/한입-리액트