2022/11/21 - Hook

useLayoutEffect ?

getSnapshotBeforeUpdate와 비슷한 역활로 useLayoutEffect 이후에 useEffect 순으로 일어나며, 렌더가 일어나기 전에 이벤트가 발생한다

The default value of useState

useState는 primitive 값을 이용하는 것이 좋다. 물론, 객체 상태를 이용 못하는 것은 아니다. 만일, 객체 상태의 값을 이용한다. 합성 형태를 다음과 같이 이용하는 것이 좋다

setState({...state, newState})

useEffect

useEffect를 이용하여 상태의 변동을 인지하는 것으로 실행을 보장받을 수 있다.

class React와 function React에서의 라이프 사이클

상태의 변동을 인지하는것을 보장 받는 방법은 useEffect()를 이용하여 보장받을 수 있다. useEffect를 이용하여 withCallBack을 구현할 수 있다.

//componentDidMount()
//componentDidUpdate()
//componentWillUnmount()
useEffect(() => console.log('effect()'));
//세개의 라이프 사이클 모두 useEffect로 구현할 수 있다.

Effect를 사용할 때의 중요한 것 Effect안에 조건문(if)을 넣어야하는 것이 아니라,

useEffect(()=>{
}, [xxxxx])

xxxx의조건으로만 조건에 따라 이펙트 콜백 실형 여부를 결정해야한다.

정리함수(clean 함수)

useEffect(() =>{
	setInterval(()=> console.count(), 500)
	return ()=>{
		clearInterval(clearId)
	}
})

이벤트 리스너나, setInterval 과 같은 함수는 눈에는 안보이더라도, 이벤트루프에 대기하고 있다가 계속 영향을 미치기 때문에 삭제해줘야한다.

Browser paints screen 이후에 Cleanup Effects가 먼저 일어나고 Run Effects를 한다.

이렇게 순서를 만든 이유는, Run Effects ⇒ Cleanup Effects를 사용하면 버그가 많았기 때문에 . 취소하고 다시 연결하여야 이러한 문제가 없다는 것을 발견하였다.

문제없게 만드는 방법

구독 취소 ⇒ 구독 ⇒ 구독 취소순

useEffect에서는 취소를 하고 구독을하고 취소하는 순으로 해서, 버그가 시달리지 않게 구현해야한다.

커스텀 훅

const [loading, setLoading] = useState(true):
const [error, setError] = useState(null);
const [data,setData] = useState(null);

useEffect(()=>{
	fetch(endpoint)
		.then((response) =>response.json())
   	.then((json)=> setData(json))
		.catch((error) => setError(error))
		.finally((loading)=> setLoading(false))
})

useEffect에서 많이 반복되는 패턴은 custom hook을 자주 이용한다

 

const useFetch(endpoint) =>{
	const [loading, setLoading] = useState(true):
	const [error, setError] = useState(null);
	const [data,setData] = useState(null);
	
	useEffect(()=>{
		fetch(endpoint)
			.then((response) =>response.json())
	   	.then((json)=> setData(json))
			.catch((error) => setError(error))
			.finally((loading)=> setLoading(false))
	}), [endpoint]
	return {response, json, error}
}