오늘은 useEffect를 사용해 상품목록과 클릭한 횟수를 표시한 버튼이 떴다가 사라졌다 하는 토글버튼 기능 코드를 짰다.
AppProducts.jsx
import React, { useState } from "react";
import Products from "./components/Products";
export default function AppProducts() {
const [showProducts, setShowProducts] = useState(true);
return (
<div>
{showProducts && <Products />}
<button
onClick={() => {
setShowProducts((prev) => !prev);
}}
>
Toggle
</button>
</div>
);
}showProducts라는 state를 하나 만들어서 버튼을 클릭할 때마다 토글이 되게 하였다.
Products.jsx
import React, { useEffect, useState } from "react";
export default function Products() {
const [count, setCount] = useState(0);
const [products, setProducts] = useState([]);
useEffect(() => {
fetch("data/products.json")
.then((res) => res.json())
.then((data) => {
console.log("🔥뜨끈한 데이터를 네트워크에서 받아옴");
setProducts(data);
});
return () => {
console.log("🧹 깨끗하게 청소하는 일들을 합니다.");
};
}, []);
return (
<>
<ul>
{products.map((product) => (
<li key={product.id}>
<article>
<h3>{product.name}</h3>
<p>{product.price}</p>
</article>
</li>
))}
</ul>
<button onClick={() => setCount((prev) => prev + 1)}>{count}</button>
</>
);
}그리고 Products 컴포넌트를 만든 뒤 fetch를 사용해 data폴더 안에 있는 상품 목록 배열을 json 형태로 바꿔서 뿌려주고 그걸 useEffect 안에서 실행되게 했다.
그리고 무한루프에 빠지지 않게 하기 위해 두번째 인자에 의존성배열을 추가했다.
useEffect에서 return 함수를 추가해야 하는 경우는 이 컴포넌트가 unmount될 때 처리해야 하는 일이 있을 때이다.(메모리를 정리해야 할 때, 소켓 네트워크 통신을 close 해야 할 때 등등)
여기서 의문점 하나!
토글버튼을 한번 누르면 '뜨끈한 데이터를 받아옴' 이 한번만 떠야 하는데
예상과는 다르게 위 사진처럼
1. unmounted될 때의 함수호출("깨끗하게 청소하는 일들을 합니다")이 한번 이루어지고
2. mounted될 때의 함수호출(fetch, "뜨끄한 데이터를 네트워크에서 받아옴")이 2번 이루어지는데,,,
이 이유는 뭘까?
구글링 해 본 결과!
development mode에서 <React.StrictMode>때문에 그렇다고 한다.
그래서 <React.StrictMode>을 제거하고 다시 작동해보니!
정상적으로 작동한다!
StrictMode는 코드의 문제를 감지하고 이에 대해 경고하기 위해 구성 요소를 두 번 렌더링한다고 한다..! (개발에서는 있지만 프로덕션에서는 아님)(매우 유용할 수 있음)
