리액트에서는 useEffect 훅을 활용하여 상태 값이 변화할 때마다 특정한 동작을 수행할 수 있습니다. 이번 포스트에서는 useEffect 훅을 사용하여 상태 값이 변할 때마다 console.log를 통해 값의 변화를 확인하는 방법에 대해 알아보겠습니다. 리액트에서 useState 훅을 사용하여 상태 값을 변경할 때마다 useEffect 훅으로 값을 확인하고 싶을 때가 있습니다. 그런데 의존성 배열을 비워놓으면 콘솔에 값이 출력되지 않습니다. 그렇다면, 어떻게 의존성 배열을 설정하면 좋을까요? 의존성 배열에 상태 값 자체를 넣는 것은 무한 렌더링을 발생시키므로 올바르지 않습니다. 대신, useEffect 함수 내부에서 상태 값을 참조하도록 코드를 작성해야 합니다. 예시 코드📌 const [count, ..

의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수이다. 의존성 배열은 잘못 관리하면 쉽게 버그로 이어지기 때문에 입력하지 않는게 좋지만 필요에 있어 입력할 일이 생긴다. 그 필요에 의한 경우를 살펴보자. 👇 useEffect(() => { fetchUser(userId).then((data) => setUser(data)); }); 위의 코드의 fetchUser가 렌더링될 때마다 호출되기 때문에 비효율적이다. 이럴때 의존성배열을 사용해줌 👇 useEffect(() => { fetchUser(userId).then((data) => setUser(data)); }, [userId]); 의존성 배열에 userId 상태 값을 넣으면 userId가 변경될 때만 fetchUser 함수가 호출된다. ..

처음 페이지를 열었을때 알아서 데이터를 불러오도록 만들어주는 'useEffect' 훅을 알아보자. import { useEffect, useState } from "react"; import { getReviews } from "./api"; import ReviewList from "./components/ReviewList"; const App = () => { const [items, setItems] = useState([]); const handleLoad = async () => { const { reviews } = await getReviews(); setItems(reviews); }; handleLoad(); return ( 최신순 베스트순 불러오기 ); }; export default..