HOOK

리엑트의 컴포넌트를 만들 때는 Class와 Function, 두가지 방법이 있습니다. Class형 컴포넌트는 복잡해질수록 이해하기 어려운 문제점을 가지고 있었기 때문에 React는 점진적으로 함수형 컴포넌트를 사용했습니다.
그러나 함수형 컴포넌트는 State,Lifecicle,메서드의 사용이 불가능했기 때문에 이 부분을 도입하기 위해Hook이라는 개념을 도입했습니다.

What HOOK?

Hook은 React 16.8에 새로 추가된 기능입니다.
Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.

---

함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미하며 함수형 컴포넌트에서만 사용이 가능합니다.

HOOK의 사용 규칙

1. 리엑트 함수의 최상위에서만 호출해야 한다
많이 실수했던 부분이었는데 생성자 함수 안에서 최상위단에만 호출해야 합니다.

2. 리엑트 함수 내에서만 사용되어야 합니다.
말 그대로 리엑트 개발에서만 사용합니다.

내장되어 있는 HOOK

• useState

const Component = () => {
	const [state,setState]=useState("초기값")
	...
}

컴포넌트의 현재 상태를 관리하는 HOOK으로 초기값을 인자로 받아(optional) 첫 번째 랜더링에서만 사용되고 이후에는 setState를 통해 상태를 변경하고 state를 통해 현재 상태를 저장하고 불러옵니다. 초기값은 객체를 포함한 모든 데이터가 들어갈 수 있습니다.

• useEffect

const Component = () => {
	useEffect(()=>{
    	console.log('hello')
    },"초기값")
	...
}

함수 컴포넌트 내의 side effect를 관리하는 HOOK입니다.

side effect는 데이터를 읽거나 가져오고, DOM을 직접 조작하는 동작을 의미합니다. 이펙트는 다른 컴포넌트에 영향을 끼칠 수 있고 랜더링 과정에서 구현할 수 없기 때문입니다.

클래스형 컴포넌트의 생명주기 메서드를 재현한 기능을 수행합니다.

1. useEffect(callBackFunc)
컴포넌트의 마운트, 업데이트, 언마운트 과정, 즉 컴포넌트가 랜더링될 때마다 실행됩니다.

2. useEffect(callBackFunc,[])
컴포넌트가 최초로 랜더링되었을 때 실행됩니다.
3. useEffect(callBackFunc,[state1,state2])
컴포넌트가 최초로 랜더링이 되고 state1 혹은 state2가 변경될 때 실행됩니다.
4. useEffect(()=>{return ()=>func() })
컴포넌트