비동기처리에 대해서 ( With React )

민이의 기술 노트 ·2023년 10월 4일

안녕하세요. 😊 민입니다. 오늘은 프로젝트를 진행하며 비동기 처리에 대한 의문이 다시 들게 되어서 React에 대해서 포스팅해 보려고 합니다.
현재 React와 SpringBoot, MySQL을 활용하여 프로젝트를 진행하고 있는데요. MySQL에서 React로 데이터를 찾는 과정 중 동기 처리를 활용해야 할지 비동기 처리를 활용해야 할지에 대한 의문이 생겼습니다.

기존의 제가 알고 있던 비동기 처리는 병렬식 처리이며, 코드에 대한 응답이 오지 않아도 다음 코드가 실행된다라고 알고 있었는데요.
하지만 코드에서 어떻게 적용되는 지 모르기에 사용을 빈번하게 하지는 않았습니다. 이번 포스팅으로 인해서 비동기처리의 장점과 단점을 이해하게 된다면 상황에 맞게 잘 사용할 수 있을것같아 포스팅해보며 비동기와 동기에 대한 공부를 해보고 싶습니다 ! 😎

목차
1. 비동기 VS 동기
.
2. 비동기처리의 장점과 단점
.
3. 코드예시와 결론

💁‍♂️ 1. 비동기 VS 동기

비동기 처리와 동기 처리의 대표적인 차이가 뭘까요 ??
흔히 아시는 내용으로는 동기 처리는 직렬적이고 비동기 처리는 병렬적이라는 것인데요. 쉽게 말씀드리면 동기 처리는 하나의 코드가 끝나야 다음 코드가 작동하는 것을 의미합니다.비동기 처리는 코드가 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행을 합니다. 이해가 쉽지 않죠 ???

요약 ✓

동기처리 -> 하나의 코드가 끝나야 다음 코드실행
비동기처리 -> 하나의 코드가 끝나지 않아도 다음 코드가 실행

이렇게 하나의 코드가 실행되고 다음 코드가 실행되는 동기와 달리 비동기는 시간이 비교적 적게소요된다는 장점이 존재합니다 !

🏃‍♂️ 2. 비동기처리의 장점과 단점

앞에서 말씀드렸다시피 비동기 처리는 동기 처리에 비해 시간이 비교적 적게 소요된다는 장점이 있었습니다. 하지만 단순히 시간이 비교적 적게 소요된다 뿐 아니라 다양한 장점이 존재하는데 그 장점에 대해서 하나씩 설명해드리려고 합니다.

🥸 장점 ✓

동시성 : 여러 작업을 동시에 병렬적으로 실행

블로킹 방지 : 작업이 완료될 때까지 대기하지 않고 다른 작업 계속

사용자 경험 개선 : 새로고침하지 않아도 정보가 온다.

네트워크 통신: 비동기 처리로 인해 페이지 로딩을 기다리지 않고 데이터를 불러오고 작업 가능

자원 공유 및 동기화 : 공유 데이터베이스 -> 충돌 방지 X 충돌 가능성을 최소화, 충돌을 관리하고 해결

이벤트 처리 : 입력, 타이머, 마우스 이벤트

요약 : 빠르고 공유데이터에 대한 충돌이 적어 사용자에게 편하다
(동시,사용자에게 정보가 빠르게 보여진다, 공유 자원사용시 충돌가능성 ↓)

🥸 단점 ✓

1.트래픽 증가 : 트래픽(서버에 대한 요청에 대한 양) , 과부하가 올 수있다
2.복잡성 : 여러 작업이 겹치면서 복잡해진다 .
3.오류 처리가 어려움 : 동기 코드보다 오류가 발생할경우 처리가 어려움
동기 코드와의 통합이 어렵다
4.순서 의존성 : 순서에 대한 처리가 어려움 (.순서지정 )
5.리소스 사용 : 추가적인 네트워크 사용

요약 : 사용자에게 편한대신 개발자에게 복잡하고 오류발생시 어려움이 있다. (복잡, 오류처리, 병렬적-> 순서설정, 트래픽증가)

(3) 코드예시와 결론

이제 장점과 단점에 대해서 설명해 드릴 시간입니다. 빠르다면 어떻게 빠른 건지 동기와 어떻게 다른 건지에 대한 코드를 확인하실 건데요. KBO 선수들의 데이터를 출력하는 코드를 확인하여 비동기 처리에 대하여 확인해 보려고 합니다.

import React, { useState, useEffect } from "react";
import axios from "axios";
import "../CSS/KboPlayerList.css"; // KboPlayerList.css 파일을 가져옴

export default function KboPlayerList() {
    const [playerList, setPlayerList] = useState([]);

    useEffect(() => {
        const fetchPlayerData = async () => {
            try {
                const response = await axios.get("/KboPlayers");
                setPlayerList(response.data);
            } catch (error) {
                console.error("데이터 가져오기 실패", error);
            }
        };

        fetchPlayerData();
    }, []);

    // 날짜 형식 변경 함수
    const formatBirthDate = (dateString) => {
        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
        return new Date(dateString).toLocaleDateString(undefined, options);
    };

    return (
        <div className="container"> {/* 컨테이너 스타일 적용 */}
            <h1>KBO Player List</h1>
            <ul>
                {playerList.map((player) => (
                    <li key={player.playerId} className="player-list-item"> {/* 클래스 이름을 추가 */}
                        <span className="player-list-item-heading">선수번호 :</span>
                        <span className="player-list-item-content">{player.player_Num}</span>
                        <br />
                        <span className="player-list-item-heading">선수이름 :</span>
                        <span className="player-list-item-content">{player.player_Name}</span>
                        <br />
                        <span className="player-list-item-heading">Position :</span>
                        <span className="player-list-item-content">{player.player_Position}</span>
                        <br />
                        <span className="player-list-item-heading">생년월일 :</span>
                        <span className="player-list-item-content">{formatBirthDate(player.player_Birth)}</span>
                        <br />
                        <span className="player-list-item-heading">키/몸무게 :</span>
                        <span className="player-list-item-content">{player.player_Physical}</span>
                    </li>
                ))}
                <li>안녕하세요 선수 리스트입니다.</li>
            </ul>
        </div>
    );
}

다음의 코드는 React에서 SpringBoot를 이용해 데이터베이스에 저장된 정보를 가져오는 코드입니다.

만약 이 코드를 두 부분으로 나눠본다면 함수 호출 부분과, 정보 출력으로 나올 수 있는데 데이터베이스에 대한 정보를 요청한 이후 정보에 대한 응답이 온 이후에 정보를 출력한다면 너무 오랜 시간 걸리겠죠 ? ( -> 동기 처리 )

함수호출 ↓


export default function KboPlayerList() {
    const [playerList, setPlayerList] = useState([]);

    useEffect(() => {
        const fetchPlayerData = async () => {
            try {
                const response = await axios.get("/KboPlayers");
                setPlayerList(response.data);
            } catch (error) {
                console.error("데이터 가져오기 실패", error);
            }
        };

        fetchPlayerData();
    }, []);

정보출력 ↓

    return (
        <div className="container"> {/* 컨테이너 스타일 적용 */}
            <h1>KBO Player List</h1>
            <ul>
                {playerList.map((player) => (
                    <li key={player.playerId} className="player-list-item"> {/* 클래스 이름을 추가 */}
                        <span className="player-list-item-heading">선수번호 :</span>
                        <span className="player-list-item-content">{player.player_Num}</span>
                        <br />
                        <span className="player-list-item-heading">선수이름 :</span>
                        <span className="player-list-item-content">{player.player_Name}</span>
                        <br />
                        <span className="player-list-item-heading">Position :</span>
                        <span className="player-list-item-content">{player.player_Position}</span>
                        <br />
                        <span className="player-list-item-heading">생년월일 :</span>
                        <span className="player-list-item-content">{formatBirthDate(player.player_Birth)}</span>
                        <br />
                        <span className="player-list-item-heading">키/몸무게 :</span>
                        <span className="player-list-item-content">{player.player_Physical}</span>
                    </li>
                ))}
                <li>안녕하세요 선수 리스트입니다.</li>
            </ul>
        </div>
    );
}