리액트 훅 사용 규칙

 

리액트 훅이란?

단순히 use로 시작하는 모든 함수이다. 

 

인쇄해서 벽에 붙여두기

 

 

2가지 메인 규칙 + 추가1

 

규칙 1. 리액트 훅은 리액트 컴포넌트 함수, 커스텀 훅 함수에서만 호출해야 한다. 

 

규칙 2. 리액트 훅은 리액트 컴포넌트 함수 또는 커스텀 훅 함수의 최상위 수준에서만 호출해야 한다. (중첩함수에서, block문에서 호출 x)

ex) if 문 안에서, useEffect 안에서 호출 금지

 

추가 규칙 3. useEffect 훅은 항상 참조하는 모든 항목을 의존성으로 useEffect 내부에 추가해야 한다. 

** useReducer 또는 useState에 의해 노출된 state 업데이트 함수는 변경되지 않도록 리액트가 보장한다. 그래서 의존성으로 넣을 필요 없다. 

 

정리 => 브라우저에서 오지 않거나, 또는 컴포넌트 함수 외부에서 오는 데이터들은 즉, useEffect를 사용하는 컴포넌트 함수 내부에서 오는 데이터들은 의존성 배열로 이동해야 한다. 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓