[TIL] Hook

error에 자꾸 Hook이 뜨길래 검색해보다가 정리해놓아야 겠다는 생각이 들었다.

 

React Hook은 v16.8부터 새로 추가된 기능이다.

 

특징으로는Component 사이에서 상태로직을 추상화해 상태 공유를 쉽게 만들어주고, 복잡한 컴포넌트를 작은 함수의 묶음 Component로 나눌 수 있다.Class없이 React 기능들을 사용할 수 있다.기존의 React에서 Class를 사용하기 위해 this 키워드가 어떻게 동작하는지 알아야했는데, Hook은 Class없이 React의 기능들을 사용하는 방법들을 제시한다.

 

Hook에는 사용 규칙이 있는데, - 최상위에서만 Hook을 호출해야한다. (반복문, 조건문, 중첩함수내에서 Hook 실행 X) - React 함수 Component내에서만 Hook을 호출해야한다.

 

useStateuseState은 Hook 에서 가장 기본이 되는 함수의 인자로 초기 state값을 하나 받고, 현재의 state값과 이 값을 업데이트하는 함수를 같이 제공한다.기존 state와 새로운 state를 합치지 않는다.

const test = (props) => {
	alert(props);
    
	return <div />
}