useEffect

Hooks?

React-Hooks
-> use로 시작
-> State(리액트 컴포넌트 전용 변수)를 만들어줌
ex) useState, useEffect ...

컴포넌트에서 변수를 만들려면 state를 사용해야 한다.
html과 javascript가 하나로 합쳐짐!

컴포넌트가 렌더링 될때 특정 작업을 실행할 수 있도록 도와주는 훅!

useEffect 언제 사용할까?

useEffect라는 Hook을 사용하면,
클래스형 컴포넌트에서만 사용할 수 있는
LifeCycle "생명주기 메서드"를 대신할 수 있다.

• 컴포넌트가 마운트 됐을 때 (componentDidMount : 처음 나타났을 때),
• 언마운트 됐을 때 (componentWillUnmount : 사라질 때),
• 업데이트 될 때 (componentDidUpdate : 특정 props가 바뀔 때)
  원하는 특정 작업을 처리할 수 있다.

state가 변화하면 화면이 리렌더 되는데, useEffect를 사용하지 않고 요청을 하게되면 불필요한 리렌더가 지속적으로 발생한다.
따라서 첫 마운트시에만 요청할 수 있도록 하기위해서는 useEffect에 의존성배열( dependency array / [] )를 넣어 준다.

axios를 useEffect에 사용하는 이유는,
동기처리(awiat)를 하면 요청을 완료하기 전까지 아래코드로 내려가지 않아 그 시간동안 화면이 그려지지 않는 문제가 있는데,
이를 해결하기 위해 화면을 모두 렌더링 한 후 useEffect를 실행해 요청을 보내면 된다.