[React] context(2)

예전에 App.js에 CRUD function만들었던걸 모두 context에 옮길거임

 

- books.js (context)

import { createContext, useCallback, useState } from 'react';
import axios from 'axios';

const BooksContext = createContext();

function Provider({ children }) {
  const [books, setBooks] = useState([]);

  const fetchBooks = useCallback(async () => {
    const response = await axios.get('http://localhost:3001/books');

    setBooks(response.data);
  }, []);


  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 };
      }

      return book;
    });

    setBooks(updatedBooks);
  };

  const deleteBookById = async (id) => {
    await axios.delete(`http://localhost:3001/books/${id}`);

    const updatedBooks = books.filter((book) => {
      return book.id !== id;
    });

    setBooks(updatedBooks);
  };

  const createBook = async (title) => {
    const response = await axios.post('http://localhost:3001/books', {
      title,
    });

    const updatedBooks = [...books, response.data];
    setBooks(updatedBooks);
  };

  const valueToShare = {
    books,
    deleteBookById,
    editBookById,
    createBook,
    fetchBooks
    // stableFetchBooks
  };

  return (
    <BooksContext.Provider value={valueToShare}>
      {children}
    </BooksContext.Provider>
  );
}

export { Provider };
export default BooksContext;

 

근데 context쓸 때 마다

import useContext하고, import BooksContext하고..

const {books } = useContext(BooksContext); 어쩌구 하면 자꾸 같은 작업 반복인데?

싶을때 hook 사용한다

 

- use-books-context.js (hook, document root에 hook이라는 폴더 만들고 새로 생성한 파일)

 

import { useContext } from "react";
import BooksContext from "../context/books";
function useBooksContext(){
    return useContext(BooksContext);
}
export default useBooksContext;

 

 

- App.js

import { useEffect, useContext } from 'react';
import BookCreate from './components/BookCreate';
import BookList from './components/BookList';
import BooksContext from './context/books';

function App() {
  const { fetchBooks } = useContext(BooksContext);

  useEffect(() => {
    fetchBooks();
  }, [fetchBooks]);

  return (
    <div className="app">
      <h1>Reading List</h1>
      <BookList />
      <BookCreate />
    </div>
  );
}

export default App;

App이 아주 깰꼼하졌따

 

사실 위 코드에는 useCallback도 사용했는데

useCallback은 첫번째 인자로 기본값을 넣고 두번째 인자로 empty array를 넣으면 딱 한 번만 실행하고 실행하지 않겠다는 뜻이다 (useEffect와 비슷하다) 

 

useCallback은 앞으로 잘 사용할지 모르겠어서 따로 포스팅 안함