async
ex.
async function fetchData() {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
}: javascript에서 비동기 함수를 정의할 때 사용하는 키워드. 이 키워드가 붙은 함수는 항상 promise를 반환함.
비동기 작업을 처리하기 위해 await와 함께 사용됨.
✏ 비동기 작업
: 코드가 실행되는 동안 다른 작업이 완료될 때까지 기다리지 않고, 즉시 다음 작업을 처리하는 방식. 이는 코드가 멈추지 않고 계속 실행될 수 있도록 함. 비동기 작업은 주로 IO 작업 (ex. 파일 읽기/쓰기, 네트워크 요청)에서 사용됨.
await
ex.
async function fetchData() {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
}: async 함수 내부에서 사용되며, promise가 해결될 때까지 코드 실행을 잠시 멈추고 기다림. await는 promise의 결과값을 반환함.
✏ promise
: javascript에서 비동기 작업을 관리하기 위한 객체. 비동기 작업이 완료되었을 때, 성공(resolve) 또는 실패(reject) 상태를 나타냄. promise는 세 가지 상태를 가짐. then, catch, finally 메서드를 사용하여 작업의 성공, 실패, 완료 상태를 처리함.
1. Pending (대기중) : 작업이 아직 완료되지 않은 상태.
2. Fulfilled (이행됨) : 작업이 성공적으로 완료된 상태.
3. Rejected (거부됨) : 작업이 실패한 상태.
catch
ex.
async function fetchData() {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
}: promise가 거부(reject) 되었을 때 실행할 콜백 함수를 지정함. 즉, 예외처리에 사용됨. promise 체인이나 try ... catch 블록에서 사용됨.
✏ promise 체인
: 여러 개의 비동기 작업을 순차적으로 처리하기 위해 then, catch를 연속적으로 연결하는 방식. 각 then 메서드는 이전 promise의 결과를 받아서 처리함.
finally
ex.
fetch('https://api.example.com/data')
.then(response => response.json())
.catch(error => console.error('Error:', error))
.finally(() => console.log('Fetch attempt finished'));:promise가 해결(resolve)되든 거부(reject)되든 상관없이 마지막에 실행할 코드를 정의함. then이나 catch 다음에 사용됨.
globalThis
ex.
globalThis.myVariable = 42;
console.log(window.myVariable); // 브라우저 환경에서 42 출력: javascript의 전역 객체를 참조함. 브라우저 환경에서는 widow로, Node.js에서는 global로 매핑됨. ES2020에서 도입됨. 즉, 환경에 상관없이 전역 객체에 접근할 때 사용됨.
✏ 전역 객체
: javascript 환경에서 모든 전역 변수와 함수를 포함하는 특수한 객체. 전역 객체는 javascript 코드의 어디에서나 접근할 수 있으며, 환경에 따라 이름과 동작이 조금씩 다름.
▶ 브라우저 환경에서의 전역 객체 - window
=> 모든 전역 변수와 함수는 사실 window 객체의 속성으로 존재함.
브라우저에서 제공하는 API (ex. alert, document, loaction 등)도 모두 window 객체의 일부임. HTML 문서의 전역 변수나 함수를 선언하면, 이는 window 객체의 속성으로 자동 추가됨.
ex.
var myVar = 10;
function myFunction() {
console.log("Hello, world!");
}
console.log(window.myVar); // 10 출력
window.myFunction(); // "Hello, world!" 출력
✏ 브라우저 환경
: 웹 브라우저에서 javascript 코드가 실행되는 환경을 의미함. 브라우저는 HTML, CSS, Javascript를 처리하며 window, document와 같은 전역 객체를 제공함.
✏ Node.js에서 global 매핑
: global 객체는 Node.js 환경에서의 전역 객체임. 브라우저 환경에서의 window 객체와 유사한 역할을 함. Node.js에서 전역 변수나 함수를 정의할 때 사용됨.
then
ex.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));: promise가 해결(resolve) 될 때 실행할 콜백 함수를 지정함. 비동기 작업이 성공했을 때 사용됨.
✏ 콜백 함수
: 다른 함수에 인수로 전달되는 함수. 특정 작업이 완료된 후에 실행되도록 설계됨. 비동기 작업이나 이벤트 처리에 자주 사용됨. 즉, 작업이 완료되었을 때 후속 작업을 처리하기 위해 사용됨.
throw
ex.
function checkValue(value) {
if (value < 0) {
throw new Error('Value cannot be negative');
}
return value;
}
try {
checkValue(-1);
} catch (error) {
console.error(error.message); // "Value cannot be negative"
}: 예외를 발생시킬 때 사용됨. 주로 try ... catch 블록에서 사용되며, 특정 오류 조건이 발생했을 때 예외를 던짐. 즉, 원하는 조건에서 예외를 발생시킴.
toast
ex.
import { toast } from 'react-toastify';
function notify() {
toast('Hello, this is a toast notification!');
}: 주로 사용자에게 일시적으로 정보를 표시하는 UI 컴포넌트를 말함. 알림 메시지를 표시할 때 사용됨. 일반적으로 라이브러리 (ex. react-toastify)를 통해 구현됨. 즉, 사용자에게 중요한 메시지를 짧게 보여줄 때 사용됨.
✏ UI 컴포넌트
:웹 애플리케이션이나 모바일 애플리케이션에서 사용자 인터페이스를 구성하는 독립적인 재사용 가능 단위.
버튼, 입력 필드, 모달 창, 카드, 네비게이션 바 등이 UI 컴포넌트에 해당함.
▶ 특징
1. 재사용성 : 컴포넌트는 여러 번 사용될 수 있음.
2. 독립성 : 각 컴포넌트는 다른 부분과 독립적으로 작동하며, 필요한 데이터나 상태만을 관리함.
3. 조합 가능성 : 여러 개의 작은 컴포넌트를 조합하여 복잡한 UI를 구성할 수 있음.
try
ex.
try {
let result = riskyOperation();
console.log(result);
} catch (error) {
console.error('An error occurred:', error);
}: 예외가 발생할 수 있는 코드 블록을 감싸는데 사용됨. 예외가 발생하면 catch 블록으로 제어가 넘어감.
useEffect
ex.
useEffect(() => {
// 이 코드 블록은 컴포넌트가 처음 렌더링된 후 실행됩니다.
console.log('Component mounted or updated');
// 선택적으로 clean-up 함수를 반환할 수 있습니다.
return () => {
console.log('Component will unmount or clean up before re-running effect');
};
}, [/* dependencies */]); // 빈 배열: 마운트/언마운트 시 한 번만 실행: React의 함수형 컴포넌트에서 부수효과(컴포넌트의 렌더링과 직접 관련이 없는 작업)를 처리하기 위해 사용되는 훅.
▶ 부수효과의 예 : 데이터 fetching, DOM 조작, 구독 관리 등이 있음.
▶ 특징
1. 컴포넌트가 렌더링 될 때마다 기본적으로 실행됨.
2. 의존성 배열을 통해 어떤 값이 변경될 때만 실행할지 지정할 수 있음.
3. 컴포넌트가 "언마운트" 되거나, 특정 효과가 다시 실행되기 전에 정리 작업을 수행할 수 있음.
→ 언마운트 : 컴포넌트가 DOM에서 제거되는 과정. react는 컴포넌트를 완전히 제거하고, 메모리를 해제하며 관련된 리소스나 이벤트 리스너들을 정리함.
의존성 배열에 값들을 전달하면, 해당 값들이 변경될 때만 useEffect가 실행됨.
빈 배열을 전달하면 해달 useEffect는 컴포넌트가 처음 마운트 될 때 한번만 실행되고 이후에는 실행되지 않음.
의존성 배열을 생략하면, 컴포넌트가 렌더링 될 때마다 useEffect가 실행됨.
✏ 의존성 배열
ex.
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
return () => {
console.log('Clean-up code, e.g., removing event listeners');
};
}, [count]); // count가 변경될 때마다 이 효과가 실행됨
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
: React의 useEffect 훅에서 특정 상태나 값이 변경될 때만 부수효과가 실행되도록 제어하는 배열.
이 배열은 useEffect의 두 번째 인자로 전달됨.
usestate
ex.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}: react의 훅(hook)으로, 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해줌. 상태값과 그 상태를 업데이트 하는 함수를 반환함. 즉, 상태 관리가 필요한 함수형 컴포넌트에서 사용됨.
✏ 함수형 컴포넌트
: React에서 UI를 렌더링 하기 위해 사용되는 컴포넌트 유형. 기존 클래스형 컴포넌트와 달리 상태(state)와 생명주기 메서드를 함수 내에서 사용할 수 있도록 훅을 제공함.
✏ 생명주기 메서드
: 컴포넌트가 생성되고 업데이트 되며, 삭제되는 과정에서 특정 시점에 호출되는 메서드들.
컴포넌트의 상태나 UI를 변경하거나, 외부 리소스를 정리하는 등의 작업을 할 수 있음.
✏ React에서의 생명주기 메서드
: 클래스형 컴포넌트에서 생명주기 메서드를 사용함. 함수형 컴포넌트에서는 useEffect 훅을 통해 비슷한 기능을 구현할 수 있음.
▶ 주요 생명주기 메서드
- constructor : 컴포넌트가 처음 생성될 때 호출됨. 초기 상태를 설정하거나 클래스 "메서드를 바인딩"할 때 사용됨.→ 메서드 바인딩 : 객체의 메서드를 해당 객체에 묶어주는 작업을 의미함.
- componentDidMount : 컴포넌트가 처음 렌더링 된 후에 호출됨. API 호출, 타이머 설정 등 초기 데이터 로드와 같은 부수효과( side Effect)를 처리할 때 사용됨.
- componentDidUpdate : 컴포넌트가 업데이트 된 후에 호출됨. 이전 상태와 현재 상태를 비교하여 필요한 추가 작업을 할 수 있음.
- componentWillUnmont : 컴포넌트가 DOM에서 제거되기 전에 호출됨. 타이머나 이벤트 리스너 등 정리가 필요한 작업을 처리함.