🧪 useEffect()

useEffect() 란 컴포넌트가 랜더링 되었을 때 특정 작업을 실행해 주는 hook 이다. 이는 컴포넌트가 Mount, Unmount, Update 시에 특정 작업을 처리한다.

💡 useEffect() 사용하기

useEffect() 의 기본형태는 useEffect(함수, 검사하고자 하는 배열) 식으로 사용된다. 거두절미하고 코드를 통해 알아보자.

useEffect(() => {
  console.log('컴포넌트가 랜더링 될 때마다 실행')
})

useEffect() 를 다음과 같이 사용하면 컴포넌트가 랜더링 될 때마다 useEffect() 안에 있는 함수가 실행된다.

useEffect(() => {
	console.log('컴포넌트가 마운트 될 때마다 실행')
}, [])

useEffect() 를 다음과 같이 사용하면 컴포넌트가 마운트 될 때마다 useEffect() 안에 있는 함수가 실행된다.

const [state,setState] = useState(0)

useEffect(() => {
	console.log('[] 안에 있는 state가 바뀔 때 마다 실행')
}, [state])

useEffect() 를 이와 같이 사용하면 [] 안에 state 의 값이 변할 때마다 useEffect() 안에 있는 함수가 실행된다.

🧃 fetch

fetch 는 데이터를 받아올 때 API 를 받아 올 때 사용하는 JavaScript 내장함수다.

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 실행할 로직
  });

🧑‍🏭 활용 - API 호출하기

import { useEffect, useState } from "react";
export default function App() {
  const [data, setData] = useState({});
  const [count, setCount] = useState(0);
  console.log("component rendered");
  useEffect(() => {
    // 최초 랜더링 시 한 번 실행
    console.log("Effect ran");
    fetch(`https://swapi.dev/api/people/${count}`)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);
  return (
    <div className="App">
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <h2>the count is {count}</h2>
      <button onClick={() => setCount((prev) => prev + 1)}>plus</button>
    </div>
  );
}

다음 코드에서는 위 App() 컴포넌트가 마운트 될 때마다 fetch 를 사용하여 스타워즈 캐릭터에 대한 정보를 받아오는 API 를 사용한 것 이다.

🕸️ Async 와 Await

React에서는 비동기 처리를 할때 Promise를 사용했었지만 ES7으로 올라가면서 async 와 await 가 추가되고 비동기 코드를 동기 코드처럼 작성할 수 있게 되었다.

💡 동기와 비동기
동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있는 방식을 말한다.
비동기 방식은 동기 방식과 반대로 응답 상태와 상관없이 다음 동작을 수행할 수 있는 방식을 말한다.

🫵 Async function

async function() {
  return "name"
}
const users = async() => { return "name" }

비동기 함수를 만드려면 그냥 함수 앞에 async 키워드를 붙혀주기만 하면 된다.

🫵 Await

await 은 async/await 문법에서 사용되며, 함수 내부에서 비동기 처리를 하는 Promise 객체를 동기적으로 처리할 수 있게 해주는 키워드다.

async function fetchData() {
  const response = await fetch('api 주소');
  const data = await response.json();
  return data;
}

위 코드에서 fetch() 함수는 Promise 객체를 반환합니다. 이 함수를 await 키워드와 함께 사용하면, fetch() 함수가 데이터를 반환할 때까지 코드가 블록되어 다음 코드가 실행되지 않습니다. 그리고, response.json() 함수도 Promise 객체를 반환하므로 await 키워드를 사용하여 데이터를 가져올 때까지 기다린다.