無제

◼️ Asynchronous (비동기) 작업이 완료될 때까지 기다리지 않고 다음 작업을 계속 수행하는 방식.작업 1 시작 ↓작업 2 ↓작업 3 ↓작업 1 완료작업이 완료되면 결과를 받아 필요한 처리를 수행한다. ◼️ Synchronous (동기)이전 작업이 완료되어야 다음 작업을 실행하는 방식.작업 1 ↓작업 2 ↓작업 3순서대로 실행되므로 흐름은 단순하지만, 오래 걸리는 작업이 있으면 다음 작업도 함께 지연된다. ◼️ 필요 이유웹 애플리케이션에서는 시간이 오래 걸리는 작업이 자주 발생한다.대표적인 예서버(API) 요청파일 업로드 및 다운로드이미지 로딩타이머(setTimeout, setInterval)이러한 작업을 동기 방식으로 처리하면 작업이 끝날 때까지 프로그램이 대기하게 된다.비동기 방식으로 처리하..

🟡 Callback Function다른 함수의 인자로 전달되어, 특정 작업이 끝난 후 실행되는 함수를 의미한다.즉, 함수를 실행하는 것이 아니라 필요한 시점에 실행할 수 있도록 다른 함수에 전달하는 함수이다. ◼️ 주요 특징 비동기 작업 처리 (API 요청, 파일 읽기 등) 이벤트 처리배열 메서드 (map, filter, forEach)타이머 (setTimeout, setInterval) ◼️ 기본 문법function main(callback) { // 작업 수행 callback();}function print() { console.log("콜백 함수 실행");}main(print); print 함수를 main의 인자로 전달하고, 작업이 끝난 뒤 callback()으로 실행한다. ◼️ 필요 ..

🟡 Axios웹 브라우저와 Node.js에서 HTTP 요청을 보낼 수 있는 Promise 기반의 라이브러리. ◼️ 주요 특징GET, POST, PUT, PATCH, DELETE 등 다양한 HTTP 메서드 지원Promise 기반 비동기 처리요청(Request)과 응답(Response) 가로채기(Interceptor) 지원요청 및 응답 데이터를 자동으로 JSON 변환요청 취소 및 타임아웃 설정 지원 ◼️ 사용 방법import axios from 'axios';// 서버에서 상품 목록 데이터를 가져오는 예시axios.get('https://api.example.com/products') .then(response => { // 요청이 성공했을 때 실행되는 코드 console.log(respons..

🟡 useEffect함수형 컴포넌트에서 사이드 이펙트(Side Effect)를 처리하는 Hook이다.(사이드 이펙트란 컴포넌트의 렌더링 외부에서 발생하는 작업을 의미한다.) ◼️ 주요 특징API 호출이벤트 리스너 등록 및 제거타이머(setTimeout, setInterval) 설정 및 해제DOM 직접 조작localStorage 접근 ◼️ 기본 문법useEffect(() => { // 실행할 코드 return () => { // 정리(Cleanup) 함수 };}, [dependencies]);첫 번째 인수: 실행할 함수.return: 정리(Cleanup) 함수.두 번째 인수: 의존성 배열. (Dependencies) ◼️ 실행 방식1️⃣ 마운트 시 한 번만 실행의존성 배열을 빈 배열([])로..

💡리액트의 생명주기 (Life Cycle)컴포넌트가 생성되고, 변경되며, 제거되는 전체 과정​을 의미한다.컴포넌트는 생성(Mount) → 업데이트(Update) → 제거(Unmount) 순서로 동작하며, 각 단계에서 필요한 작업을 수행할 수 있다.(현재는 함수형 컴포넌트를 주로 사용하며, 라이프사이클은 useEffect를 통해 관리하는 것이 일반적이다.) ◼️ 생명주기의 3단계 1️⃣ Mount (마운트)컴포넌트가 처음 화면(DOM)에 렌더링되는 단계​.🔸 주요 작업초기 데이터 설정API 요청이벤트 리스너 등록타이머 시작 🔸 클래스형 컴포넌트의 주요 메서드constructor(): 초기 state 설정.render(): 화면 렌더링.componentDidMount(): 렌더링 완료 후 실행. AP..