내일배움캠프 React트랙 29일차 회고 (2022.12.09)

useEffect

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

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

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

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

-> ....... -> ....... ♾️(무한루프에 빠진다.)

 

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

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

useEffect의 첫번째 인자에는 원하는 콜백함수를 작성, 두번째 인자에는 dependancy을 전달한다.

아무 dependancy도 전달하지 않은 빈 배열의 형태는 컴포넌트가 렌더되는시점(첫 mount 시점) 딱 한번만 useEffect가 작성된 해당컴포넌트함수가 호출되도록되도록 한다.  

또한 컴포넌트가 사라질때 메모리정리, 소켓네트워크를 닫고싶다면 rturn값으로 함수를 전달하면 된다. 

 

---

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

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

 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여부를 혼동하지 않도록 해줘야하는 것 같다.