[React] useEffect

　무한은 수(數), 양(量), 공간, 시간 따위에 제한이나 한계가 없음을 뜻합니다. 무한은 논리적으로는 존재할 수 있지만 현실에는 존재할 수 없다고 생각합니다. 가장 위대한 이론물리학자로 알려진 알버트 아인슈타인은 무한에 대해 이렇게 말했습니다.

Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.
두 가지의 무한이 있습니다. 하나는 우주이고, 하나는 인간의 어리석음입니다. 그리고 나는 우주에 대해 확신하지 않습니다.

아인슈타인의 말이 사실인지 모르겠지만, 그의 말은 무한한 사유의 바다로 이끕니다. "우주가 유한하다면 우주의 끝에 벽이 있나?", "인간의 어리석음은 끝이 없나? 왜 없지" 등의 질문이 끝없이 이어집니다.

리액트에는 무한 루프에 빠지는 경우가 있습니다. 리액트는 첫 렌더링 시 컴포넌트 함수를 호출해 리액트 돔을 구성합니다. 그런데 백엔드 서버에 요청을 전달하는 fetch() 함수를 사용하게 되면 상태가 변화되어 다시 리액트 돔을 구성하게 됩니다. 무한 루프에 빠지는 것이지요.

이때 useEffect()를 통해 무한 루프에서 벗어날 수 있습니다.

---

useEffect

Hook의 한 종류입니다. fetch() 코드를 useEffect() 안으로 넣습니다. useEffect()는 함수와 배열을 인자로 받습니다. useEffect()는 첫 렌더링(혹은 마운팅)이 일어났을 때 작동하고, 이후에는 배열 안의 오브젝트 값이 변할 때마다 콜백 함수를 호출합니다. 우리는 빈 배열을 넣었기 때문에 fetch()가 다시 동작하지 않고 무한 루프에서 빠져나올 수 있습니다. 이같은 이유로 렌더링 후 발생하는 효과(Effect)라는 이름이 붙었습니다.

import './App.css';
import Todo from './Todo';
import React, { useState, useEffect } from 'react';
import { Container, List, Paper } from '@mui/material';
import AddTodo from './AddTodo';

function App() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const requestOptions = {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    };

    fetch('http://localhost:8080/todo', requestOptions)
      .then((response) => response.json())
      .then(
        (response) => {
          setItems(response.data);
        },
        (error) => {}
      );
  }, []);

  const addItem = (item) => {
    item.id = 'ID-' + items.length;
    item.done = false;
    setItems([...items, item]);
    console.log('items : ', items);
  };

  const deleteItem = (item) => {
    const newItems = items.filter((e) => e.id !== item.id);
    setItems([...newItems]);
  };

  const editItem = () => {
    setItems([...items]);
  };

  let todoItems = items.length > 0 && (
    <Paper style={{ margin: 16 }}>
      <List>
        {items.map((item) => (
          <Todo
            item={item}
            key={item.id}
            editItem={editItem}
            deleteItem={deleteItem}
          />
        ))}
      </List>
    </Paper>
  );

  return (
    <div className="App">
      <Container maxWidth="md">
        <AddTodo />
        <div className="TodoList">{todoItems}</div>
      </Container>
    </div>
  );
}

export default App;

---

💁‍♂️reference

리액트를 다루는 기술

김민준 지음ㅣ길벗ㅣ2019ㅣ도서 정보

EOD.