useEffect 2

비동기 함수와 useEffect에서의 처리 방식 쉽게 이해하기

기본 이해부터  : 비동기 함수 (async/await)를 왜 사용해야 할까? API 요청을 할 때, 서버에서 응답을 받기까지 시간이 걸리기 때문! 이렇게 말하면 뭐라는지 모를게 뻔하니,API 호출은 뭡니까 -> 네트워크를 통해 외부 데이터를 가져오는 것이 떄 네트워크 요청은 응답이 오기까지 시간이 얼마나 걸릴지 예측이 불가능합니다. 근데 이때 우리가 쓰는 자바스크립트는 동기적으로 작동하는데,네트워크가 느려서 응답을 기다리는 동안 동기적 작동하는 자바스크립트가 딱 막혀버리면전체가 막혀버리겠습니다. (blocking) 이라 하죵흔히 쓰는 크롬 브라우저의 버튼 클릭이랑 화면 조작이 먹통이되는 겁니다.결론적으로 이를 방지하기 위해서 작업이 완료될때까지 기다리지 않고, 다른 작업을 할 수 있도록 하는 것이 목적..

Data Fetching : User의 능동성 여부와 useEffect의 올바른 공존

서론 React 애플리케이션에서는 데이터를 서버에서 가져오는 작업(Fetching)이 필수적입니다. 하지만 데이터를 언제, 어떻게 가져올지는 사용자와 애플리케이션의 동작 방식에 따라 다릅니다. 이를 크게 두 가지로 나눌 수 있습니다: 1. 수동적 데이터 Fetching: 페이지가 로드되거나 특정 상태가 변경될 때, 애플리케이션이 자동으로 데이터를 서버에서 가져옵니다. 2. 능동적 데이터 Fetching: 사용자가 버튼 클릭이나 특정 액션을 통해 데이터를 요청합니다. 이 두 가지 경우는 각각의 특성과 요구사항이 다르기 때문에 React의 useEffect와 비동기 통신 함수의 역할이 달라집니다. 이번 포스팅에서는 상황에 맞는 useEffect와 비동기 함수의 활용법을 알아보고, 능동성과 수동성에 따라 us..

FrontEnd Develop 2025.01.22