[React] useEffect

근데 우리의 프로젝트는 첫 실행했을때 가지고 있는 데이터르 ㄹ띄워야한단 말이져

 

function App(){
    const[books, setBooks] = useState([]);
    const fetchBooks = async()=>{
        const response = await axios.get('http://localhost:3001/books');
        setBooks(response.data);        
    };
    // fetchBooks(); 무한 츠쿠요미

fetchBooks라는 함수를 만들었고염

근데 이거 7행처럼 호출해보면.. 절대 안 됨.

7행에서 fetchBooks호출하면 setBooks하져

setter함수 호출하면 다시 App함수가 실행되고

다시 7행에서 fetchBooks호출하고 setBooks().. App호출

하는 무한 요청의 루프에 빠지게 됨

 

그래서 이거 어케 하냐? 

useEffect를 사용한다

대충 이런거임

import { useEffect, useState } from "react";

이제 useEffect도 import해주고

 

function App(){
    const[books, setBooks] = useState([]);
    const fetchBooks = async()=>{
        const response = await axios.get('http://localhost:3001/books');
        setBooks(response.data);        
    };
    useEffect(()=>{
        fetchBooks();
    }, []);

이렇게하면 새로고침 했을 때 딱 한 번만 리퀘스트 요청한다

document.ready같은 것인가봄

 

암튼 이걸 좀 더 파보자면

 

arrow function은 () => 임

그래서 그걸 언제 요청하는지 타이밍을 알아야되겟다

 

App을 호출하는게 최초 렌더링,, 그리고 스테이트가 업데이트 될 때 마다 렌더링이 되는데

useEffect는 언제 호출하느냐? 최초 렌더링이 끝나자마자 바로 실행된다.

그럼 두번째 세번째 렌더링할때도 호출하고 싶다면? 그건 useEffect의 두번째 인자에 따라 달라진다

 

두번째 인자에 따라 처리가 달라진다

 

암튼 이케이케 해서 delete, update, insert관련 함수를 수정함

function App(){
    const[books, setBooks] = useState([]);
    const fetchBooks = async()=>{
        const response = await axios.get('http://localhost:3001/books');
        setBooks(response.data);        
    };
    useEffect(()=>{
        fetchBooks();
    }, []);

    const createBook = async(title) => {
        const response = await axios.post('http://localhost:3001/books',{
            title:title
        });        
        const updateBooks = [...books, response.data];
        setBooks(updateBooks);  
    };
    const deleteBookById = async(id) => { 
        const response = await axios.delete(`http://localhost:3001/books/${id}`);
        const updatedBooks = books.filter((book)=>{
            return book.id !== id;
        });
        setBooks(updatedBooks);
    };
    const editBookById = async(id, newTitle) => { 
        const response = await axios.put(`http://localhost:3001/books/${id}`,{
            title:newTitle
        });  
      
        const updatedBooks = books.map((book)=>{
            if(book.id === id)
                return {...book, ...response.data } // response에서 다른속성은 무시하고 data만 가져와서 업데이트한다
            return book;
        });        
        setBooks(updatedBooks);      
    };

주의할 것은 update할 때 각 컬럼 값을 여러명이 동시에 수정할 수 있자나여?

내가 title을 수정하는 동안 다른 사람은 page를 수정햇을 수 있으니까여 

그럼 response가 가장 최신 데이터를 가지고 있기 때문에

object값을 {...book, ...response.data}로 업데이트 해줌. ...response.data는 해당 객체에서 다양한 속성을 빼서 book에 추가해주는거어미