useEffect란?

컴포넌트가 렌더링 될 때마다 특정 작업을 실행 할 수 있도록 하는 Hook이다.

마운트 / 언마운트 / 업데이트시

Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때를 다룬다.

useEffect는 언제 실행될까 ?

useEffect실행 시점은 렌더링 이후에 실행이 된다 .
즉, useEffect는 처음 렌더링이 일어나고는 useEffect는 렌더링 이후에 확인하기 때문에 useEffect에서 request시에 데이터를 담아서 오게 되는 경우
return문에 map함수를 사용해서 쓰게되면 최초의 렌더링에는 undefined가 발생한다. 왜냐면 첫 렌더링에는 값을 받아오지 않기 때문이다.

이를 해결하기 위한 두가지가 있다.

첫번째

1. useState에서 배열을 관리하게 될텐데 빈배열로 선언하게 되면 에러(undefined)가 일어나지 않고 map함수는 비어있기 때문에 에러가 나지않는다.

const [arr,setArr] = useState([])

두번째

2. map함수 앞에 undefined가 아니라면 이라는 조건을 걸어준다.

const [arr,setArr] = useState([])

if (arr !== undefined){ arr.map(()=>{
	return(
			<div></div>	
	)}

}