React Hooks

Hook : class없이 state를 사용할 수 있는 새로운 기능.

Hook을 사용하기 위해선 규칙을 지켜야한다.

Hooks는 오직 최상위에서만 호출해야한다.

즉 반복, 조건, 중첩된 함수 내에서 호출하면안된다.

이 규칙을 따라야 컴포넌트가 랜더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것을 보장하기 때문이다.

useState, useEffect가 여러번 호출되어도 Hook상태를 올바르게 유지할 수 있기 떄문이다.

만약 조건문안에 Hook을 작성했다고 하자.

useState('use1')
if (toggleValue) { //init value = true , next = false
	useEffect(use2)
}
useState('use3')
useEffect(use4);

첫째 랜더링에선 true로 4개의 hook이 전부 실행되었지만 조건이 변경되고 리랜더링되면서 2번째 hook이 실행되지 않았다.

그럼 에러가 발생한다.

React는 호출"순서"로 Hook를 사용한다.

예제를 보자