리액트 훅스 (useState, useEffect)

Hooks 어떤 기능에 같이 실행되는

useState()

• state를 사용하기 위한 hook

useEffect()

• side effect를 수행하기 위한 hook
  서버에서 데이터를 받아오거나 수동으로 dom을 변경하는 것 등등을 side effect라고 칭함 (다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없기 때문)
• 리액트의 함수 컴포넌트에서 side effect를 실행할 수 있게 해주는 hook
• 생명주기함수와 동일한 기능 (componentDidMount, componentDidUpdate, componentWillMount와 비슷하게 작동)
• useEffect(effect 함수, 의존성 배열);
  -useEffect(effect 함수, []); effect function이 mount, unmount시에 단 한번씩만 실행됨
  -useEffect(effect function); 의존성배열을 생략하면 컴포넌트가 업데이트될 때마다 호출됨

useEffect(()=> {
	//컴포넌트가 마운트 된 이후
	// 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행됨
	//의존성 배열에 빈배열을 넣으면 마운트와 언마운트시에 단 한번씩만 실행됨
	//의존성 배열 생략 시 컴포넌트 업데이트 시마다 실행됨

	return()=>{
		//컴포넌트가 마운트 해제되기 전에 실행됨
	}
},[의존성변수1, 의존성 변수2, ….]