2/6 TIL

useEffect

• 페이지가 처음 생길 때(마운트), 사라질 때(언마운트), 종속성 배열을 추가적으로 지정해준다면 그 지정값들이
  바뀔 때마다 useEffect 안에 있는 로직들이 실행된다.

useEffect를 사용하는 예시

마운트 될 때

• props 로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청 (REST API 등)
• 라이브러리 사용 (D3, Video.js 등...)
• setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

언마운트 될 때

• setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

내가 가장 많이 실수했던 것

const [data, setData] = useState(null)
useEffect(() =>{
	axios.get('api')
    .then((res) => setData(res.data))
    .catch((err) => console.error(err))
}, [data])

useEffect 안에서 외부 API를 요청 시 의존성 배열에 state 값을 넣으면 단순히 'data'라는 값이
변경될 때마다 새로 페이지를 렌더해주겠지 라는 안일한 생각으로 코드를 짠 결과,
'setData'로 인하여 'data'가 변경되고 그러면 또 useEffect가 실행 되는 무한요청이 발생하게 되었다.

외부 API 요청 시 내가 필요한 state값에 값을 넣기 위해서는

const [data, setData] = useState(null)
const [user, setUser] = useState(null)
useEffect(() =>{
axios.get('api')
.then((res) => {setData(res.data)
{user} = res.data.user
setUser(user)
})
.catch((err) => console.error(err))
}, [])

식의 구조 분해 할당식으로 부여하면 원하는 값을 추출해낼 수 있다.