๐Ÿ“ฑ Cross Platform/React Native

[React Native] React Native + Node.js + MySQL To do list ๋งŒ๋“ค๊ธฐ 5 - Axios ์ด์šฉํ•˜์—ฌ CRUD ๊ตฌํ˜„ํ•˜๊ธฐ (Implementing a api with Axios)

Fomagran ๐Ÿ’ป 2022. 7. 27. 01:39
728x90
๋ฐ˜์‘ํ˜•

 

 

 

์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค.

 

์ด๋ฒˆ ๊ธ€์€ React Native + Node.js + MySQL ํŠœํ† ๋ฆฌ์–ผ์˜ ๋งˆ์ง€๋ง‰ ๋‹จ๊ณ„์ธ Axios๋ฅผ ํ™œ์šฉํ•˜์—ฌ CRUD๋ฅผ ๊ตฌํ˜„ํ•ด ์‹ค์ œ ์„œ๋ฒ„์— API๋ฅผ ์š”์ฒญํ•˜๊ณ  ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๊ณ , ์ƒ์„ฑํ•˜๊ณ , ์ˆ˜์ •ํ•˜๊ณ  ,์‚ญ์ œํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ •๋ฆฌํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~


Tutorial

 


Install

 

axios

 

npm install axios@0.25.0

Implementing a api with Axios

 

Axios๋ฅผ import ํ•ด์ค๋‹ˆ๋‹ค.

 

import Axios from 'axios';

 

Create

 

post ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋กœ์ปฌ ์•„์ดํ”ผ ์ฃผ์†Œ์— /create url๋กœ todo ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด ์ƒ์„ฑํ•ด ์ค๋‹ˆ๋‹ค.

 

  const addTodo = (todo: TodoModel) => {
    Axios.post('http://๋กœ์ปฌ์•„์ดํ”ผ์ฃผ์†Œ:ํฌํŠธ๋ฒˆํ˜ธ/create', todo)
      .then(res => {
        console.log(res.data);
        getTodos()
      })
      .catch(error => console.log(error));
  };

 

Read

 

get ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•˜์—ฌ Todo ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ต๋‹ˆ๋‹ค.

 

  const getTodos = () => {
    Axios.get('http://๋กœ์ปฌ์•„์ดํ”ผ์ฃผ์†Œ:ํฌํŠธ๋ฒˆํ˜ธ/todos')
      .then(res => {
        setTodos(res.data);
      })
      .catch(error => console.log(error));
  };

 

Update

 

put ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ณ€๊ฒฝํ•  Todo ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•ด ์ค๋‹ˆ๋‹ค.

 

  const editTodo = (todo: TodoModel) => {
    Axios.put('http://๋กœ์ปฌ์•„์ดํ”ผ์ฃผ์†Œ:ํฌํŠธ๋ฒˆํ˜ธ/todos', todo)
      .then(res => {
        console.log(res.data);
      })
      .catch(error => console.log(error));
  };

 

Delete

 

delete ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•˜์—ฌ ์‚ญ์ œํ•  id๋ฅผ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋„ฃ์–ด ์ „์†กํ•ด ์ค๋‹ˆ๋‹ค. 

 

  const deleteTodo = (id: number) => {
    Axios.delete(`http://๋กœ์ปฌ์•„์ดํ”ผ์ฃผ์†Œ:ํฌํŠธ๋ฒˆํ˜ธ/todos/${id}`)
      .then(res => {
        console.log(res.data);
        getTodos();
      })
      .catch(error => console.log(error));
  };

CRUD Todos

 

Get todos

 

useEffect๋ฅผ ํ™œ์šฉํ•ด ํ™”๋ฉด์ด ๋ Œ๋”๋ง ๋  ๋•Œ todos๋ฅผ ๋ฐ›์•„์˜ค๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

 

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

 

์•„๋ž˜์™€ ๊ฐ™์ด ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์žˆ๋Š” Todos๊ฐ€ ์ฝ์–ด์ ธ ์˜ต๋‹ˆ๋‹ค.

 

 

Add todo

 

handleSubmit์—์„œ Todo๊ฐ€ ์ถ”๊ฐ€ ๋˜์—ˆ์„ ๋•Œ addTodo ๋ฉ”์„œ๋“œ์— ํ˜„์žฌ todo ๋ฐ์ดํ„ฐ๋ฅผ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋„ฃ์–ด ์ถ”๊ฐ€ํ•ด ์ค๋‹ˆ๋‹ค.

 

  const handleSubmit = (todo: TodoModel) => {
    if (
      todo.author == '' ||
      todo.title == '' ||
      todo.content == '' ||
      todo.priority == -1
    ) {
      Alert.alert('Please fill in all the required fields!');
    } else {
      ...
      } else {
        addTodo(todo);
      }
      setModalVisible(false);
      getTodos();
    }
  };

 

์šฐ์ธก ์ƒ๋‹จ์˜ + ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ณ  ์›ํ•˜๋Š” ๋‚ด์šฉ์„ ์ž…๋ ฅํ•˜๋ฉด ํ•ด๋‹น Todo๊ฐ€ ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค,

 

 

 

Update todo

 

handleSubmit์—์„œ Todo๊ฐ€ ์ˆ˜์ •๋˜์—ˆ์„ ๋•Œ editTodo์— ๋ณ€๊ฒฝํ•  todo ๋ฐ์ดํ„ฐ๋ฅผ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋‹ด์•„ ์ˆ˜์ •ํ•ด ์ค๋‹ˆ๋‹ค.

 

  const handleSubmit = (todo: TodoModel) => {
    if (
      todo.author == '' ||
      todo.title == '' ||
      todo.content == '' ||
      todo.priority == -1
    ) {
      Alert.alert('Please fill in all the required fields!');
    } else {
      if (editIndex !== -1) {
        editTodo(todo);
        setEditIndex(-1);
      } else {

 

3๋ฒˆ์งธ Todo์˜ ์ˆ˜์ • ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ author์˜ ์ด๋ฆ„์„ Young์œผ๋กœ ์ˆ˜์ •ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด Todo๊ฐ€ ์ˆ˜์ •๋ฉ๋‹ˆ๋‹ค.

 

 

Delete todo

 

delete ๊ฒฝ๊ณ ์ฐฝ์ด ๋œจ๊ณ  OK ๋ฒ„ํŠผ์ด ๋ˆŒ๋ ธ์„ ๋•Œ ํ˜„์žฌ index๋ฒˆ์งธ todo์˜ id๋ฅผ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋‹ด์•„ ์‚ญ์ œํ•ด ์ค๋‹ˆ๋‹ค.

 

  const showDeleteAlert = (index: number) => {
    Alert.alert(
      'Delete',
      'Do you want to delete?',
      [
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed!'),
        },
        {
          text: 'OK',
          onPress: () => {
            deleteTodo(todos[index].todoid);
          },
        },
      ],
      {cancelable: false},
    );
  };

 

๊ฒฝ๊ณ ์ฐฝ์ด ๋œจ๊ณ  OK ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ํ•ด๋‹น Todo๊ฐ€ ์‚ญ์ œ๋ฉ๋‹ˆ๋‹ค.

 


Source code

 

์•„๋ž˜ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋กœ ์ด๋™ํ•˜๋ฉด ์ „์ฒด ์†Œ์Šค๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

๊ถ๊ธˆํ•˜์‹  ์  ์žˆ์œผ์‹œ๋ฉด ์–ธ์ œ๋“  ๋Œ“๊ธ€ ๋‹ฌ์•„์ฃผ์„ธ์š”!

 

 

GitHub - fomagran/ToDoListFullStack: React native(CLI,TS) + Node.js + MySQL

React native(CLI,TS) + Node.js + MySQL. Contribute to fomagran/ToDoListFullStack development by creating an account on GitHub.

github.com

 

728x90
๋ฐ˜์‘ํ˜•