강승규

동기 처리란?순차적으로 작업을 실행하는 방식이다. A와 B가 있다고 가정을 하자. A라는 작업이 끝나야만 B라는 작업을 할 수가 있다. 반대로 비동기 처리란?위 상황과 같이 A와 B가 있다고 가정을 했을 때, A와 B 작업을 같이 시작한다. 동기 처리와 비동기 처리의 최적의 상황은 어떻게 될까?상황동기 처리비동기 처리간단한 작업적합불필요작업 간의 의존성적합작업 간의 의존성이 없다면 병렬 처리가 적합시간이 오래 걸리는 작업시간이 오래 걸리는 작업이라면 성능 저하 발생적합UI 반응성 유지부적합적합병렬 작업부적합적합복잡한 작업 흐름적합부적합 일반적으로는 React에서 비동기 처리 작업을 많이 한다고 한다. 왜 일까?개인적인 생각으로는 리액트는 컴포넌트에 데이터 바로바로 바껴야하는데 동기 처리를 한다면, 데이터..

프로젝트 코드를 보면 Axios라는 것을 사용하고 있다. '근데 문득 드는 생각이 왜 Axios를 쓰게 됐나? Fetch API도 있는데' 그럼 Axios와 Fetch의 차이점을 알아보자. AxiosFetch API설치 여부필요불필요Json 변환자동으로 변환수동으로 변환네트워크 에러 발생 시기본적으로 처리가 잘 되어 있음수동으로 처리해야함 이거보다 더한 차이점도 있을거라고 생각을 하지만, Axios가 조금 . 더 편리하고 사용하기 쉽다는 것을 알 수 있다.그래서 프로젝트 기간에는 Axios를 선택해서 한 것 같다. 결론적으로는, Axios와 Fetch 둘 다 HTTP 요청을 통해 사용하게 되고, Axios가 사용하기 편리하다. Axios 사용법Axios를 사용하기 위해서는 메소드에 따라 요청하는 방법이 ..

이전 글에서 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하기 위해 사용하는 것이 props라는 것을 알았다. 전달받은 값을 사용하기 위해서는 새로운 문법인 UseState와 useEffect를 알아야 한다. 프로젝트하면서 useState와 useEffect 두 개의 Hook을 많이 사용한 것 같다. useState란?함수형 컴포넌트 내에서 상태 관리할 수 있게 해주는 함수이다.import { useState } from 'react';function Example() => { const [examData, setExamData] = useState();}export default Example;사용할 때는, 위 코드처럼 사용하면 된다. const [examData, setExamData] = useSta..

props란?부모 컴포넌트에서 자식 컴포넌트에게 전달하는 값이다.부모 컴포넌트에서 값을 받기 때문에 자식 컴포넌트는 값을 수정할 수 없는 '읽기 전용' 상태가 되며, 부모 컴포넌트에서 prop의 값이 변경이 된다면 자식 컴포넌트에서 해당 값이 리렌더링이 된다. 코드를 통하여 확인을 해보자.import React, { useEffect, useState } from "react";import axios from 'axios';import MypageLeft from "./MypageLeft";import config from '../../../config';function MypageLeftContent() { const userId = localStorage.getItem('userId') c..

최종 프로젝트가 끝나고 한 달이 지났다.최종 프로젝트를 하면서도 리액트에 대한 공부가 부족하다고 생각이 되어, 리액트에 대한 공부와 프로젝트 때 사용한 코드를 리팩토링을 시작할 것이다.