React Hook

Hook 배경

• 그동안의 React는 컴포넌트간에 로직을 재사용하는 방법을 제공하지 않았다. 그러나 사용자들은 render props나 고차 컴포넌트 패턴을 사용하여 이 문제를 해결해 왔다. 하지만 이러한 방법은 코드의 추적을 어렵게 만들었고 Wrapper 지옥에 빠지게 만들었다. 이러한 문제때문에 Hook이 탄생했다.

Hook이란?

• Hook은 컴포넌트에서 React state와 생명주기 기능을 연동(Hook into)시켜주는 함수이다. class에서는 동작하지 않지만 class없이 React를 사용해주는 함수이다.

Effect Hook

• useEffect는 side effects를 담당하는 함수로, 생명주기 관련 기능을 사용할 수 있게 해준다. DOM이 렌더링된 후 effect함수가 실행된다.

• class에서는 각각 lifecycle에 쪼개 주어야했던 로직들을 useEffect에 몰아서 넣을 수 있다.

Hook 규칙

• 항상 최상위 레벨에서만 사용할 수 있다. 조건문, 중첩문, 함수 내부에서는 사용할 수 없다.

• React 함수 컴포넌트, custom hook안에서만 호출할 수 있다.

Custom Hook

• 상태관련 로직을 재사용하고 싶을 때 custom hook으로 만들어서 사용할 수 있다.

• HOC, render props를 사용하지 않고도 편리하게 재사용할 수 있다.

• custom hook은 기능보다는 컨밴션에 가깝다. use라는 Prefix를사용한 재사용 상태로직을 사용하는 것이다.

useEffect

• useEffect는 첫번째 렌더링 후, 매번 화면이 렌더링 될때마다 실행된다. (mount + update)

• effect를 렌더링 이후에 발생하는 것이라고 생각하면 된다.

• unmount 라이프사이클 효과를 내기위해서는 cleanup 함수를 사용한다.

useEffect(() => {
	func()
	return () => {
		// clean-up func (unmount 시에 실행)
	}
}, [])