5. State - 컴포넌트 내부 상태 관리State는 컴포넌트 내부에서 관리하는 동적인 데이터임.Props와 달리 컴포넌트 자신이 state를 변경할 수 있음.State의 특징:변경 가능: `setState`나 상태 업데이트 함수로 변경 가능비공개: 해당 컴포넌트에서만 접근 가능변경 시 재렌더링: `state`가 변경되면 컴포넌트가 다시 렌더링됨useState Hook함수형 컴포넌트에서 state를 사용하는 가장 기본적인 Hook임.import { useState } from 'react';function Counter() { // [현재 상태값, 상태 업데이트 함수] = useState(초기값) const [count, setCount] = useState(0); return ( ..

1. React 컴포넌트란?React 컴포넌트는 재사용 가능한 UI 구성요소임. 레고 블록처럼 여러 컴포넌트를 조합해서 복잡한 웹 애플리케이션을 만들 수 있음컴포넌트의 핵심 특징입력(Props)을 받아서 UI(React 엘리먼트)를 반환함독립적이고 재사용 가능함자체적인 로직과 스타일을 포함할 수 있음다른 컴포넌트와 조합하여 복잡한 UI를 구성함왜 컴포넌트를 사용할까?? 전통적인 웹 개발에서는 HTML, CSS, JavaScript를 각각 분리했음.React는 "기술별 분리" 대신 "기능별 분리"를 함 장점:코드 재사용성이 높아짐유지보수가 쉬워짐테스트가 용이함협업이 효율적임관련된 코드가 한 곳에 모여 있어서 이해하기 쉬움2. 컴포넌트의 핵심 개념React는 선언형 프로그래밍 방식으로 UI를 작성함."어떻게..

두 문법은 생김새가 같지만 `...`의 역할이 완전히 다름`Spread` 연산자 : 값을 '펼치는'역할`Rest` 매개변수 : 남은 값을 '모아주는' 역할1. `Spread` 연산자 (전개 연산자)배열이나 객체의 요소를 하나씩 흩뿌려서 복사하거나 합칠 때 사용함let arr1 = [1, 2, 3];let arr2 = [4, ...arr1, 5, 6]; // ...arr1이 Spread 연산자console.log(arr2); // [4, 1, 2, 3, 5, 6]배열 합치기 / 복사할 때 유용함let arr3 = [...arr1]; // 얕은 복사 (shallow copy)console.log(arr3); // [1, 2, 3]객체에서도 사용 가능let obj1 = { a: 1, b: 2 };let obj..

구조 분해 할당은 배열이나 객체의 값을 손쉽게 변수로 꺼내는 문법임배열의 인덱스나 객체의 키를 하나씩 접근할 필요 없이,필요한 값만 직접 변수에 담을 수 있음1. 배열의 구조 분해 할당let arr = [1, 2, 3];let [one, two, three, four /* = 4 */] = arr;console.log(one, two, three, four); // 1 2 3 undefined(4)설명배열의 인덱스에 따라 변수의 값이 할당됨대응되는 값이 없으면 `undefined`가 됨`=`를 사용해 기본값을 줄 수 있음let [a, b, c =10] = [1, 2];console.log(a, b, c); // 1 2 102. 객체의 구조 분해 할당let person = { name: "도서", ag..

"단락 평가"란, 논리 연산자(`&&`, `||`)가 왼쪽 값만으로 결과가 확정되면 오른쪽은 평가하지 않는 것을 의미함1. 기본개념function returnFalse() { console.log("False 함수"); return false;}function returnTrue() { console.log("True 함수"); return true;}console.log(returnFalse() && returnTrue());// 출력: // False 함수 // false설명`&&`는 왼쪽이 `false`면 이미 전체가 false -> 오른쪽 실행 X그래서 `returnTrue()`는 호출되지 않음-> 이게 "단락 평가"의 핵심2. 동작 비교console.log(returnTrue() && ..

자바스크립트에서는 조건문에서 true/false를 직접 쓰지 않아도값 자체가 "참 같은 값"인지 "거짓 같은 값"인지에 따라 분기할 수 있음1. Falsy한 값let f1 = undefined;let f2 = null;let f3 = 0;let f4 = -0;let f5 = NaN;let f6 = "";let f7 = 0n;if (!f1) { console.log("falsy"); // 실행됨}`""`(빈 문자열)은 `falsy``" "`(공백 하나 있는 문자열은 `truthy`2. Truthy한 값위 7가지를 제외한 나머지는 전부 `truthy`임let t1 = "hello";let t2 = 123;let t3 = [];let t4 = {};let t5 = () => {};if (t5) { cons..

배열은 여러 데이터를 순서대로 저장할 수 있는 자료형숫자 목록이나 이름 목록처럼 "순서가 있는 데이터"를 다룰 때 사용함1. 배열 생성let arrA = new Array(); // 배열 생성자let arrB = []; // 배열 리터럴 → 대부분 이렇게 사용2. 다양한 자료형을 담을 수 있음let arrC = [1, 2, 3, true, "hello", null, undefined, () => {}, {}, []];자바스크립트 배열은 숫자, 문자열, 함수, 객체 등 모든 자료형을 섞어서 넣을 수 있음3. 배열 요소 접근let item1 = arrC[0]; // 첫 번째 요소 (인덱스 0)let item2 = arrC[1]; // 두 번째 요소console.log(item1, item2)..

자바스크립트에서 객체는 "하나의 관련된 값들을 묶어놓은 것" 이라고 보면 됨`이름`, `나이`, `직업`처럼 어떤 대상을 표현할 때 쓰는 것이 객체1. 객체 생성하기// (1) 생성자로 만드는 법let obj1 = new Object();// (2) 리터럴로 만드는 법 -> 이거 제일 많이 씀let obj2 = {}; 2. 객체 프로퍼티(속성)let person = { name: "도서", // key: value age: 27, hobby: "독서", job: "개발자", extra: {}, 10: 20, // 숫자도 key가 될 수 있음 (내부적으로는 "10" 문자열로 저장됨) "like cat": true, // 공백 있는 key → 반드시 따옴표로!};포인트`..

스코프(`scope`)는 "변수나 함수에 접근할 수 있는 범위"를 의미함1. 스코프의 종류구분설명예시전역 스코프(`Global Scope`)코드 전체에서 접근 가능함수 밖에서 선언된 변수지역 스코프(`Local Scope`)특정 코드 블록 `{ }`안에서만 접근 가능함수 내부, 블록 내부에서 선언된 변수2. 전역 스코프 & 지역 스코프 예시let a = 1; // 전역 스코프function funcA() { let b = 2; // 지역 스코프 (funcA 내부에서만 접근 가능) console.log(a); // 가능 (전역 변수 접근) function funcB() {} // funcA 내부 지역 스코프 함수}funcA();console.log(a); // 가능 (전역)console.log(b)..