React/ part.3 Hook

Hook?

해당 글에서는 리액트의 주요 개념인 props와 state를 다루기 전에 알아야할 Hoo에 대한 기본적인 개념 정리를 다루고 있습니다.

이어지는 게시글에서 props와 state에 대해 자세히 다룹니다.

---

1. Hook

class component ⇒ function component

 

이전에 작성한 React part.2 component에서 hook의 등장으로

function component를 더 활발하게 사용하게 되었다고 언급한 바 있다. 

 

Hook은 상태 관리 및 라이프 사이클을 관리해주는 함수로서 함수 컴포넌트의 단점 보완한다.

clacc component에서만 사용이 가능하던 기능을 function component에서도 사용할 수 있도록 연동해주는 함수이다.

 

 

다시 짧게 짚어보는 function component 장점

선언하기 편함

직관적

메모리자원 덜 사용

이러한 장점에도 사용하지 못하던 함수 컴포넌트는 hook의 등장으로 부활하게 된다.

 

 

2. Hook 특징

함수 컴포넌트에서만 사용이 가능하다.

( 애초에 함수컴포넌트를 사용하려고 만들어졌다.)

 

hook의 이름은 반드시 use-로 시작한다.

 

리액트에서 제공하는 내장 hook이 존재한다.

(useState, useEffect…)

⇒ 외부 라이브러리 없이도 사용이 가능하다.

 

외부 라이브러리 또는 내장 hook이 없는 경우 직접 만들 수 있다.

⇒ custom hook

 

 

3. Hook 사용 규칙

 

함수 컴포넌트 내에서만 호출할 수 있다. 

Hook을 호출할 수 있는 곳은 단 두곳이다.

함수 컴포넌트 내부

custom Hook 내부

함수 컴포넌트 밖에서는 호출할 수 없다.

또한 자바스크립트 함수에서도 호출할 수 없다.

 

함수 컴포넌트 내의 최상위(at the top leve)에서만 호출할 수 있다.

React가 여러 Hook들을 구분할 수 있는 유일한 정보는 Hook이 사용된 순서이기 때문에

이러한 규칙을 지켜 작성해야 렌더링 될 떄마다 돌일한 순서로 Hook이 호출되는 것을 보장할 수 있다.

 

반복문, 조건문 등의 중첩문에서는 호출이 안된다.

특정 조건에 부합하지 않을 경우 Hook이 호출되지 않아, Hook이 사용된 순서가 섞이게 된다.

 

이 밖의 규칙으로

return문 아래에서도 호출이 안된다.

컴포넌트 선언을 한 위에서 호출해도 작동이 안된다.

 

 

 

---

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!