🌪️React Hooks

#️⃣React Hooks

Hooks 는 리액트 v16.8 에 새로 도입된 기능으로 기존 Class 바탕의 코드를 작성할 필요 없이 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

---

사용 규칙

1. 최상위에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다. → 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장되어야 한다.

2. React 함수 내에서만 Hook를 호출해야 한다. Hook은 일반적인 js 함수에서는 호출해선 안된다. 함수형 컴포넌트나 custom hook에서는 호출이 가능하다.

---

React Hooks 등장 계기

1. 상태 로직의 재사용 기존에는 컴포넌트 간 상태 로직을 공유하기 어려웠다. 이로 인해 코드 재사용성이 낮아졌고, 복잡도가 증가했다. React Hooks는 이러한 문제를 해결하고 상태 로직을 간단하게 재사용할 수 있게 해준다.

2. 복잡한 컴포넌트 구조 클래스형 컴포넌트에서는 생명주기 메서드를 통해 상태 관련 로직을 관리하는데, 이는 컴포넌트의 복잡도를 증가시켰다. React Hooks는 함수형 컴포넌트에서 상태 관련 로직을 관리하는 데에 훨씬 간단하고 직관적인 방법을 제공한다.

3. Class의 혼란 클래스 컴포넌트에서는 JavaScript의 this 키워드와 클래스 구조에 대한 혼란이 있었다. 이는 개발자들에게 혼란을 야기하고 코드의 이해와 유지보수를 어렵게 만들었다. React Hooks를 사용하면 함수형 컴포넌트를 통해 더욱 명확하고 간결한 코드를 작성할 수 있다.

이러한 이유로 React 개발진은 React Hooks를 도입하여 React 개발의 간편성과 유지보수성을 향상시키고자 했다.

---

참고 사이트

React 공식 문서 - Hook의 개요

[React] 리액트 훅에 대해 알아보기 (React Hooks이란?)