jonbeo 님의 블로그

React를 처음 배우면서 가장 많이 마주치는 훅 중 하나가 바로 **useEffect**입니다.하지만 초보자 분들에게는 “언제 실행되는지?”, “언제 멈추는지?” 헷갈리기 쉬운 개념이죠.이번 포스팅에서는 useEffect의 동작 원리와 사용법,그리고 클래스 컴포넌트의 라이프사이클 메서드와의 비교까지 알아보겠습니다.✅ 1. useEffect란?컴포넌트가 렌더링된 이후 특정 작업(=Effect)을 수행할 수 있도록 하는 React Hook입니다. 예:API 호출이벤트 리스너 등록타이머 설정외부 상태 동기화 등📌 기본 문법 useEffect(() => { // 실행할 코드}, [의존성 배열]);✅ 2. useEffect 실행 시점 정리 의존성 배열 실행 시점 없음항상 실행 (렌더링마다)빈 배열 []처음..

안녕하세요 😊웹 개발에서 자주 만나는 개념이 바로 **비동기 처리(Asynchronous)**입니다.API 요청, 파일 읽기, setTimeout 같은 작업은 즉시 끝나지 않기 때문에 비동기 방식으로 처리됩니다.자바스크립트는 이런 작업을 다루기 위해 콜백(callback) → Promise → async/await 순으로 발전해 왔습니다.오늘은 그 중에서도 Promise와 async/await을 쉽게 설명해드리겠습니다.📍 1. Promise란?Promise는 “결과를 약속한다”는 의미 그대로, 비동기 작업의 성공/실패 결과를 표현하는 객체입니다. const fetchData = new Promise((resolve, reject) => { const success = true; if (succes..

안녕하세요 😊웹 개발에서 서버와 데이터를 주고받는 일은 아주 흔합니다.예전에는 XMLHttpRequest를 사용했지만,이제는 더 간단하고 직관적인 fetch() API가 표준으로 자리 잡았습니다.이번 글에서는 fetch() API의 기본 사용법부터에러 처리, JSON 변환, POST 요청, async/await 활용까지 정리해보겠습니다.📍 1. 기본 사용법fetch("https://jsonplaceholder.typicode.com/posts/1") .then(response => response.json()) // JSON 변환 .then(data => console.log(data)) .catch(error => console.error("에러 발생:", error)); 📌 특징첫 번째 인..