본문 바로가기

useEffect

(2)
React에서 useEffect(() => {}, [])를 쓰는 이유 📚 목차useEffect란?useEffect의 두 번째 인자, dependency array빈 배열 []을 넣는 이유는?실전 예시의존성 배열을 잘못 쓰면 생기는 문제요약 정리마무리 React를 처음 접했을 때 useEffect(() => {...}, [])처럼 빈 배열이 왜 필요한지 의아했던 적 있지 않으신가요?이 글에서는 useEffect의 기본 개념부터, 왜 종종 "빈 배열"을 함께 사용하는지에 대해 하나하나 쉽게 정리해볼게요.1️⃣ useEffect란?useEffect는 React 컴포넌트가 렌더링될 때 부수 효과(side effect) 를 실행할 수 있게 해주는 Hook입니다.부수 효과란?데이터를 불러오는 작업 (fetch)이벤트 리스너 등록타이머 설정콘솔 출력, 로깅 등useEffect(() ..
React에서 async/await 제대로 활용하기 🙋‍♂️ 왜 비동기가 필요할까?React 앱을 만들다 보면 외부 API에서 데이터를 가져오는 일이 많습니다. 그런데 자바스크립트는 싱글 스레드 기반이라 시간이 오래 걸리는 작업이 있으면 다른 작업들이 블로킹(멈춤) 될 수 있어요.이 문제를 해결하기 위해 비동기 처리가 필요하고, 이걸 깔끔하게 해주는 문법이 바로 async/await입니다.async와 await란?개념 설명async비동기 함수임을 선언합니다. 항상 Promise를 반환합니다.awaitPromise가 끝날 때까지 기다리고, 그 결과값을 반환받습니다.쉽게 말해, "동기 코드처럼 보이지만 실제로는 비동기 처리"가 되는 마법 같은 문법이에요.실전 예제: 유저 리스트 불러오기 (주석 포함)import React, { useEffect, useSt..