yunkogong

1️⃣ 흔히 마주치는 코드React에서 폼 입력값을 하나의 state로 관리할 때 자주 등장하는 패턴이다.setField((prev) => ({ ...prev, [id]: e.target.value,}));여기서 의문이 생긴다. [id]처럼 대괄호를 왜 써야 할까? 그냥 id: e.target.value로 쓰면 안 되는 걸까?2️⃣ 두 코드의 결과 비교const id = 'unit';const obj1 = { id: '123' };const obj2 = { [id]: '123' };console.log(obj1); // { id: '123' }console.log(obj2); // { unit: '123' }id: '123' → key는 항상 문자열 "id"[id]: '123' → key는 변수 id..

1️⃣ setState의 두 가지 사용법setState(newValue); // 직접 대입setState(prev => updatedValue); // 함수형 업데이트함수형 업데이트는 이전 상태에 의존하는 변경에서 안전하다. 클로저 함정과 배치 업데이트 이슈를 모두 피할 수 있다.2️⃣ 왜 함수형 업데이트인가같은 핸들러에서 상태를 연속으로 갱신할 때 차이가 드러난다.// ❌ 직접 대입 — count는 이 렌더 시점 값으로 고정(클로저)setCount(count + 1);setCount(count + 1);setCount(count + 1);// 결과: +1 (세 번 모두 같은 count를 참조)// ✅ 함수형 — 항상 직전 결과를 받아 누적setCount(prev => prev ..

✅ 개요slice()는 배열의 일부를 얕은 복사하여 새로운 배열을 반환하는 메서드입니다.⚠️ 원본 배열은 변경되지 않습니다. (비파괴)🧪 문법arr.slice(begin, end); begin: 시작 인덱스 (기본값 0, 음수 가능)end: 종료 인덱스 (미포함, 생략 시 끝까지, 음수 가능)🔍 예시const arr = [1, 2, 3, 4, 5, 6];arr.slice(0, 3); // [1, 2, 3]arr.slice(2); // [3, 4, 5, 6]arr.slice(-2); // [5, 6]arr.slice(); // 전체 복사🎯 핵심 포인트end 인덱스는 포함되지 않음음수 인덱스는 배열 끝을 기준으로 계산원본 배열은 변경되지 않음 (비파괴)✨ 한 줄 정리sli..

프로그래밍을 하다 보면 return을 언제 써야 하는지 헷갈릴 때가 있습니다.조건문에서 빠져나올 때값을 계산해서 전달할 때async 함수에서 API 결과를 반환할 때상황은 다양하지만, 결국 return의 역할은 몇 가지 목적 안에서 정리할 수 있습니다. 이 글에서는 return의 사용 목적을 기준으로 정리해보겠습니다.1️⃣ 흐름 제어를 위한 return조건을 만족하지 않으면 함수를 즉시 종료하고 싶을 때 return을 사용합니다.const validate = (value: string) => { if (!value) return; console.log("value", value);};핵심조건이 맞지 않으면 이후 코드 실행 중단if + return 구조로 중첩을 줄이고 가독성 향상“이 지점에서 실..