React-Hook

React-Hook

---

리액트는 두 가지 방법으로 컴포넌트를 만들 수가 있다.

 

1.     Class 형태

2.     Function 형태

 

Class형태는 리액트의 모든 기능들을 파워풀하게 사용할 수가 있다.

하지만 class에서 사용되는 문법들을 알아야하고 다소 복잡하다.

 

그에 반해 function 형태는 리액트의 제한된 기능만을 사용할 수 있고

Function에서 사용되는 문법만 알면 되기에 단순하다.

Function 형태에서 사용할 수 없는 작업은 대표적으로

컴포넌트 내부에 state를 만들어 사용하는 것이다.

또 컴포넌트의 생성,변경,소멸의 event인 life cycle API도 사용할 수가 없었다.

 

이제는 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게

Hook이 REACT 버전 16.8에 새로 추가 되었다.

 https://www.youtube.com/watch?v=dpw9EHDh2bM

이런 변화에도

React에서는 Class를 제거할 계획은 없다고 한다.

Hook이 우리가 알고 있는 React의 컨셉을 대체하지 않는다는 것이다.

우리가 현재 대표적으로 사용하고 있는 sns 인 페이스북도 수만 개의 Class 컴포넌트들을 작성했고, 재작성할 계획이 없다고 한다. 그 대신, 새로운 코드에서 기존 코드와 나란하게 Hook을 사용할 계획이라고 한다.

 

 

---

 

Hook 사용 규칙

Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 한다.

 

· 최상위(at the top level)에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행해서는 안된다.

· React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.

 

 

기존 클래스

---

 

 

 

 

 

Hook

---

 

 

Hook은 특별한 함수이다.

예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다.

언제 Hook을 사용할까? 

함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때

클래스 컴포넌트로 바꾸곤 했을 것이다.

하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있다.

 

 

Using the State Hook

---

useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 

현재의 state값을 변경할 수 있는 함수를 이벤트 핸들러나 다른 곳에서 호출 가능하다.

useState는 인자로 초기 state 값을 받는다.

this.state와 달리 Hook에서는 state이 객체일 필요가 없다.

 

 

state 변수 선언하기

---

클래스를 사용할 때, constructor 안에서 this.state를 { count: 0 }로 설정함으로써 count를 0으로 초기화했다.

함수 컴포넌트는 this를 가질 수 없기 때문에 this.state를 할당하거나 읽을 수 없습니다. 대신, useState Hook을 직접 컴포넌트에 호출한다.

 

 

state 가져오기

---

클래스 컴포넌트는 count를 보여주기 위해 this.state.count를 사용한다.

반면 함수 컴포넌트는 count를 직접 사용할 수 있다.

 

 

state 갱신하기

---

클래스 컴포넌트는 count를 갱신하기 위해 this.setState()를 호출한다.

 

반면 함수 컴포넌트는 setCount와 count 변수를 가지고 있으므로 this를 호출하지 않아도 된다.

 

 

여러 state 변수 선언하기

---

하나의 컴포넌트 내에서 state hook을 여러 개 사용할 수도 있다.