AppProducts_useEffect(토글, fetch, 삼항연산자, re-rendering조건)

• 토글 
• fetch
• 삼항연산자

---

fetch 사용법

fetch는 자바스크립트의 built-in 메서드이다.

fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다.

반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject한다.

두번째 인자인 옵션 객체는 필수가 아니므로 url만을 인자로 설정해도 된다.

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

 

컴포넌트가 re-rendering 되는 조건

1. 자신의 상태가 변경될 때(state 변경)

2. 자신이 전달받은 props가 변경될 때(props)

3. 부모 컴포넌트가 리렌더링 될 때
4. forceUpdate 함수가 실행될 때

---

useEffect

AppProducts.jsx

import React, { useState } from 'react';
import './App.css';
import Products from './components/Products';

export default function AppProducts() {
  const [showProducts, setShowProducts] = useState(true);
  return (
    <div>
      {showProducts && <Products />}
      <button onClick={() => setShowProducts((show) => !show)}>Toggle</button>
    </div>
  );
}

논리연산자 Logical Operator을 이용해서 toggle을 구현한 코드이다.

---

Products.jsx

 

🖕잘못된 예제

export default function Products() {
  const [count, setCount] = useState(0);
  const [products, setProducts] = useState([]);
  
  fetch("data/products.json")
    .then((res) => res.json())
    .then((data) => {
      console.log("🔥뜨끈한 데이터를 네트워크에서 받아옴");
      setProducts(data);
    });

⚠️다음과 같은 함수작성은 문제가 있다.

SetProducts(data)를 통해 useState([])가 업데이트되고나면  ->  React는 업데이트된 컴포넌트함수(Products)를 다시 호출한다.

->  SetProducts(data)를 통해 useState([])가 업데이트되고나면 ->   React는 업데이트된 컴포넌트함수(Products)를 다시 호출한다. -> ....... -> ....... ♾️(무한루프에 빠진다.)

 

👍이럴때에는 useState와 같이 React에서 제공해주는 useEffect Hook을 이용하면 된다.

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("🧹 깨끗하게 청소하는 일들을 합니다.");
    };
  }, []);

• useEffect의 첫번째 인자에는 원하는 콜백함수를 작성, 두번째 인자에는 dependancy을 전달한다.
• 아무 dependancy도 전달하지 않은 빈 배열의 형태는 컴포넌트가 렌더되는시점(첫 mount 시점) 딱 한번만 useEffect가 작성된 해당컴포넌트함수가 호출되도록되도록 한다.  
• 또한 컴포넌트가 사라질때 메모리정리, 소켓네트워크를 닫고싶다면 useEffet내부에 rturn값으로 함수를 전달하면 된다. 

---

Products.jsx

 

만약 어떠한 요소가 변경될때마다 컴포넌트호출을 하고싶다면 다음과 같이 작성하면 된다.

/** html작성부
*<input
*	id='checkbox'
*    type='checkbox'
*    value={checked}
*    onChange={handleChange}
*/>
*

export default function Products() {
  const [products, setProducts] = useState([]);
  const [checked, setChecked] = useState(false);
  const handleChange = () => setChecked((prev) => !prev);

  useEffect(() => {
    fetch(`data/${checked ? "sale_" : ""}products.json`)
      .then((res) => res.json())
      .then((data) => {
        console.log("🔥뜨끈한 데이터를 네트워크에서 받아옴");
        setProducts(data);
      });
    return () => {
      console.log("🧹 깨끗하게 청소하는 일들을 합니다.");
    };
  }, [checked]);
}

이렇게 작성하면, dependancy안에 작성된 checked라는 요소가 변경될때마다 useEffect가 작성된 해당컴포넌트함수가 호출된다.

---

Child warning

React uses the key prop create a relationship between the component and the DOM element. The library uses this relationship to determine whether or not the component should be re-rendered.

 

잘은 모르겠지만, 자식 요소를 key prop을 가져 react가 re-rendered여부를 혼동하지 않도록 해줘야하는 것 같다.

  <li key={product.id}>

  return (
    <>
      <input
        id="checkbox"
        type="checkbox"
        value={checked}
        onChange={handleChange}
      />
      <label htmlFor="checkbox">Show Only 🔥 Sale</label>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <article>
              <h3>{product.name}</h3>
              <p>{product.price}</p>
            </article>
          </li>
        ))}
      </ul>
    </>
  );
}