✨ web front 데이터 요청 (3)

✨프론트에서 서버의 데이터 요청하기

React

💻 React 웹 프론트에서 express 서버에 데이터 요청하기

step 3. React에서 Server에 데이터 요청하기

React에서 서버로 데이터를 요청하는 방법

• fetch사용 : 기본 제공하는 api로, 설치할 것 없이 간편하게 사용
• axios 사용 : 리액트에서 제공하는 라이브러리로, npm i axios해야 함.

Server에 데이터 요청할 시 알아야 할 것

• 서버 주소
• 어떤 HTTP 메소드를 사용할 것인가 ? (DATA Method: GET, POST, HTTP......)

axios를 활용한 데이터 요청

step 1. axios 라이브러리 설치하기

터미널 > npm i axios 

step 2. axios import 하기

import axios from 'axios';

step 2. 서버로 데이터 요청

axios.get('서버 주소/요청주소').then( (response) => {
	setDataList(response.data);
});

코드를 더 깔끔하게 작성하기 위해서 await 문법을 쓰기 위해 async로 감싸준다.

const fetchData = async() =>{
	const response = await axios.get('서버주소/요청주소');
    setDataList(response.data);
 };

---

step 3. 서버의 데이터 클라이언트에서 출력

01. useState

useState를 활용하여 서버에서 응답이 오면 상태가 변경되도록 하기
!! useState는 값이 변경되면 리렌더링이 된다.!!
!! 다시 변경된 값을 가지고 실행됨을 의미 !!

const [datalist, setDataList] = useState(null);
....
axios.get('서버 주소/요청주소').then( (response) => {
	setDataList(response.data);
});

그러나 useState를 잘못 사용할 시, 무한 반복에 빠져서 계속 상태 변화를 감지에 리렌더링을 반복하게 된다. 이를 해결하기 위해서 useEffect를 사용한다.

02. useEffect

useState의 리렌더링을 조절하고 싶을 떄, useEffect를 사용한다.

---

처음 한번만 리렌더링 되도록하기

useEffect ( () => {
	const response = await axios.get('서버주소/요청주소');
    setDataList(response.data);
}, []);

---

03. 출력하기

JSX 파일의 return문 안에서 출력
데이터 값이 하나가 아닌 객체나 배열일 시에는 map 사용 권장

<div>
	<h1> DATA </h1>
    <!-- map을 활용하여 배열을 순차적으로 순회시킴 -->
    {todoList.map( (todo) => (
    	<div key={todo.id}>
        	<div>{todo.id}</div>
        	<div>{todo.data1}</div>
            <div>{todo.data2}</div>
        </div>
     ))}
</div>

만약 데이터를 요청하기 전에 null 값이 todoList에 들어오면 null.map이 되어 에러가 발생하므로 todoList에 null 값이 들어오간, todo가 없을 때는 optional chaining으로 undefined를 만들어 렌더링이 되지 않도록 함.

<div>
	<h1> DATA </h1>
    <!-- todoList? 사용  -->
    {todoList?.map( (todo) => (
    	<div key={todo.id}>
        	<div>{todo.id}</div>
        	<div>{todo.data1}</div>
            <div>{todo.data2}</div>
        </div>
     ))}
</div>

04. 데이터 삽입 요청

1. 화면에 데이터 입력/삽입 할 수 있는 화면 구현하기

<!-- 데이터를 입력하고 추가 버튼 클릭 시 form의 onSubmin을 이용해 원하는 값을 받아서 데이터를 보낼 수 있음 -->
<form onSubmit={}>
	<input name='text'/>
    <input name='done' type='checkbox'/>
    <input name='submit' value='데이터추가'/>
</form>

2. 효율성을 위해 서버 주소를 React App 밖에 SERVER_URL 상수로 작성해준다.

const SERVER_URL = '서버주소/요청주소';

3. onSubmit 함수를 작성해서 추가 버튼 클릭 시 서버에 데이터 추가를 요청하는 함수 구현

const onSubmitHandler = async (e) => {
	const text = e.target.text.value;
    //check박스이기 때문에 checked로 T/F 체크함. 
    const done = e.target.done.checked;
    axios.post(SERVER_URL, {data1, data2});
};

4. submit을 클릭해서 서버에 요청(data1=test&data2=test2)을 보낸 후, 다시 submit을 작성할려고 하면, 해당 클라이언트 주소에 전에 보낸 요청값이 기본 동작(localhost:3000/?data1=test&data2=test2)이 유지되는 문제 해결

const onSubmitHandler = (e) => {
	// 기본 동작 유지 변경하기  
    e.preventDefault();
    ...
}

5. 데이터 추가 될 떄마다 바로바로 변경된 데이터를 받아오도록 onSubmitHandler 함수 수정하기

const onSubmitHandler = async (e) => {
	e.preventDefault();
	const text = e.target.text.value;
    //check박스이기 때문에 checked로 T/F 체크함. 
    const done = e.target.done.checked;
    axios.post(SERVER_URL, {data1, data2});
    fetchData();
};

6. 문제 발생! 동일한 코드 중복 사용하는 구간이 발생함, 중복 발생되는 코드를 함수로 빼서 코드 수정하기

const response = await axios.get('서버주소/요청주소');
    setDataList(response.data);

수정된 코드

const fetchData = () => {
	const response = await axios.get('서버주소/요청주소');
    setDataList(response.data);
}

기존에 실행되는 곳에서는 함수를 실행시켜주면 된다.

useEffect{ () => {fetchData()}, []);
...
const onSubmitHandler = (e) => {
	.....
 	}).then( () => fetchData() );
}

클라이언트 전체 코드 (axios 활용)

import React, {useState, useEffect} from 'react';
import axios from 'axios';

const App = () => {
	// 데이터를 담을 useState 값 
	const [datalist, setDataList] = useState(null);
    // 데이터를 가져오는 fetchData 함수 
    const fetchData = async() =>{
        const response = await axios.get('서버주소/요청주소');
        setDataList(response.data);
     };
    // 젤 처음 실행 시 렌더링 되도록 하는 useEffect
    // useEffect의 두 번쨰 인자로 dependancy에 아무것도 넣지 않으면 한 번에 렌더링이 된다
    useEffect{ () => {fetchData()}, []);
    const onSubmitHandler = async (e) => {
        e.preventDefault();
        const text = e.target.text.value;
        //check박스이기 때문에 checked로 T/F 체크함. 
        const done = e.target.done.checked;
        axios.post(SERVER_URL, {data1, data2});
        fetchData();
    };
  return (
  	<div>
      <h1> DATA </h1>
      <!-- 데이터를 입력하고 추가 버튼 클릭 시 form의 onSubmin을 이용해 원하는 값을 받아서 데이터를 보낼 수 있음 -->
      <form onSubmit={onSubmitHandler}>
          <input name='text'/>
          <input name='done' type='checkbox'/>
          <input name='submit' value='데이터추가'/>
      </form>
      <!-- todoList? 사용  -->
      {todoList?.map( (todo) => (
          <div key={todo.id}>
              <div>{todo.id}</div>
              <div>{todo.data1}</div>
              <div>{todo.data2}</div>
          </div>
       ))}
  </div>
  )
}
export default App;