API.1 - React에서 사용하는 많이쓰는 Http 통신라이브러리 - use-http

이번 시간에는 React에서 사용하는 사람들이 많이사용하는 HTTP 통신라이브러리 use-http를 알아보겠습니다.

 

사실 사람들이 많이쓰는 통신라이브러리는 axios 가 대표적인데요 axios는 GET POST 같은 method를 주로 사용합니다.

 

 

이번에는 사람들이 많이 사용한 2번째 Http 통신라이브러리 use-http 라이브러리에 대해 알아보겠습니다.

 

use-http 라이브러리 도 axios 같이 언어는 동일하지만 쓰는 방식은 다릅니다.

 

useFetch (use-http)

저는 이곳에 있는 use-http 사이트를 참조해서 만들어 보겠습니다.

 

npx create-react-app use-http

use-http를 사용하기 위해서 React 앱을 만들어줍니다.

 

yarn add use-http or npm i -S use-http

먼저 use-http 라이브러리를 설치해줍니다.

 

 

자 먼저 만들기전에 중요한 필요없는 파일들을 지워줍니다.

 

1. reportWebVitals

 

리액트에 성능 측정을 위한 파일입니다. 개발시에는 이 파일을 쓰는 일은 거의 없습니다.

 

2.setUpTest.js 

 

리액트 테스트를 실행할때 설정하는 파일입니다. 이파일도 현재 테스트 할일이 없기떄문에 지워줍니다.

 

3.logo.svg 

 

리액트 처음실행시 로고를 띄워주는 svg 파일입니다. 이 파일도 개발시에는 쓸 필요가 없습니다.

 

4.App.test.js 

 

리액트 테스트 실행하는 파일입니다. 지워줍니다.

 

다 지워주면 이파일만 남습니다. 이건 저의 기준이기 때문에 꼭 필요없다는건 아니고 필요하실때가 있으실겁니다.

 

그런것은 잘 판단하시고 지워서 개발 해주시면 됩니다.

 

App.js 에가서 Form 컴포넌트를 쓰기위해 Form.js만들어주시고 App.js 에서 Form을 불러와줍니다.

 

 

 

먼저 메인 파일을 만들어주세요. 

 

/* eslint-disable no-unused-vars */
import "./style.css";
import React, {useState,useEffect,useCallback} from 'react'
import {render} from "react-dom";
import useFetch, { Provider } from "use-http";
import {
  Button,
  Row,
  Snowflakes,
  Input,
  Loading,
  Col,
  Center
} from "./components";
 
import reportWebVitals from './reportWebVitals';
 
 
// TodoList 설정 
const TodoList = () => {
  const [title, setTitle] = useState("");
  const [todos, setTodos] = useState([]);
 
  // get post 방식 API 처럼 const
  const { get,post,response, loading, error } = useFetch({data: []});
  
   // todos 생성자 만들기
  const loadInitialTodos = useCallback(async () => {
    // const { ok } = response // 좋지 않는 방법
    // /todos 파일에 접근해서 get방식으로 가져옴
    const initailTodos = await get("/todos");
    if(response.ok) setTodos(initailTodos);

  }, [get,response]); // 배열 받아옴
 
  useEffect(() => {
    loadInitialTodos();
  }, [loadInitialTodos]); // componentDiMount 

 
  // 새로운 Todo 리스트 만들기
  const addNewTodo = useCallback(async () => {
    if (!title) return; // 만약 타이틀이없다면 항목을 추가하지않음
    // const { ok } = response // 좋지않는 방법
    // 새로운 todo == 제목과 body에 있는 제목들 받아옴
    const newTodo = await post("/todos", { title, body: title });

    if(response.ok) {
      setTitle("");

      // 목록 맨앞에 추가 
      setTodos((todos) => [newTodo, ...todos]);
    }
  }, [post,response,title]); // 배열로 받아오기



  return (
    <Snowflakes>
        <Center>
            <h1 style={{ marginBottom: 0}}>TodoList만들기</h1>
            <h3 style={{ margin: 0 }}>use-http</h3>
            <a 
              style={{margin: "4px 0 12px 0", 
              textDecoration: "none", color:"white", 
              fontWeight: "bold"}}
              target="_link"
              href="https://www.youtube.com/watch?v=_-GujYZFCKI&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=6"
           >
             유튜브 링크
            </a>
            
            <Row>
              <Input 
                 placeholder="Add todo title🔥"
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
                 right={loading && <Loading/>}
                 />
                <Button onClick={addNewTodo}>
                  {loading ? "추가할 리스트를 입력해주세요..." : "리스트 추가"}
                </Button>
            </Row>
            <Col>
              {error && "Error!"}
              {todos.map((todo, i) => (
                <div key={i}>
                  {i + 1}. {todo.title}
                </div>
              ))}
        </Col>
        </Center>
    </Snowflakes>
  )
} 


const App = () => {
  return (
      <Provider
         url="https://jsonplaceholder.typicode.com"
        options={{ cachePolicy: "no-cache" }}
      >
          <TodoList /> 
      </Provider>
  );
}


render(<App/>, document.getElementById("root"));
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js 폴더를 지웠습니다. 메인은 index.js 부터입니다. 맨 처음 SnowFlakes부터 만들어보겠습니다.

 

/* eslint-disable no-unused-vars */
import React from "react";
import styled, {keyframes} from "styled-components"; 
 
// 스타일
const Container = styled.div`
   color:white;
   overflow:hidden;
   background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
   min-height: 100vh;
   width: 100vw;
   padding: 15px;
//    overflow-x:hidden;
`;
 
export const Snowflakes = ({ children, ...props }) => {
   return (
       <Container {...props}>
           {children}
       </Container>
   )
}

Container 부분을 만들어주고 Container 부분 Container 에게 Props 값을 보내줍니다. children 을 받아오면 리스트가 활성화 됩니다.

 

export * from "./Form";
export * from "./Snowflakes";
export * from "./Button";
export * from "./Row";
export * from "./Input";
export * from "./Loading";
export * from './Col';
export * from "./Center"

Index.js 를 만들어서 각각의 from 부분을 설정해줍니다. 

 

/* eslint-disable no-unused-vars */
import React from "react";
import styled, {keyframes} from "styled-components"; 
 
// 스타일
const Container = styled.div`
   color:white;
   overflow:hidden;
   background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
   min-height: 100vh;
   width: 100vw;
 
//    overflow-x:hidden;

`;
 
export const Snowflakes = ({ children, ...props }) => {
   return (
       <Container {...props}>
           {children}
       </Container>
   )
}

이부분은 현재

리스트의 몸통부분을 맡을 곳입니다. 그럼 이제 BackGround 몸통 부분을 설정했다면 가운데 Center부분을 설정해줘합니다.

 

import styled from "styled-components";


export const Center = styled.div`
   display:flex;
   height: 100vh;
   flex-direction: column;
   jstify-content: center;
   align-items:center;
   color:white;
`;

 

Cneter 부분의 스타일 

 

     <h1 style={{ marginBottom: 0}}>TodoList만들기</h1>
            <h3 style={{ margin: 0 }}>use-http</h3>
            <a 
              style={{margin: "4px 0 12px 0", 
              textDecoration: "none", color:"white", 
              fontWeight: "bold"}}
              target="_link"
              href="https://www.youtube.com/watch?v=_-GujYZFCKI&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=6"
           >
             유튜브 링크
            </a>

몸통부분 설정했다면 첫번째 TodoList 제목 과 유튜브 링크 부분을 설정

합니다. 이제 밑에 리스트 추가 박스를 추가해야겠죠 ?? 

 

       <Row>
              <Input 
                 placeholder="Add todo title🔥"
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
                 right={loading && <Loading/>}
                 />
                <Button onClick={addNewTodo}>
                  {loading ? "추가할 리스트를 입력해주세요..." : "리스트 추가"}
                </Button>
            </Row>

App부분에 Row Input 부분를 추가 합니다.

 

그럼 이렇게 리스트가 추가 되겠죠 그럼 이제 밑에 리스트 박스를 추가해줘야 합니다.

      <Col>
              {error && "Error!"}
              {todos.map((todo, i) => (
                <div key={i}>
                  {i + 1}. {todo.title}
                </div>
              ))}
        </Col>

 

이제 리스트를 추가했을때 나타낼 리스트 목록을 추가시켜주면 끝

 

그럼 최종적으로 리스트를 추가했을때 리스트가 목록에 들어가게 됩니다. 그럼 TodoList를 만드는데 성공!

 

 

react-axios 와 사용방법이 거의 비슷하죠?? 서로다르지만 todoList를 사용했을때 axios보다 코드가 좀더 깔끔해보이고 쓸만한것 같네요.. 

 

 

axios를 주로 사용하지만 그래도 좀더 코디을 짤때 더 편한 식으로 짜야하는게 좋을듯합니다.

 

 

 

GitPage 바로가기

React App

 

GitHub - Koras02/react-use-http: https://use-http.com/#/

참고 사이트