I'm sw engineer!

✅ React.useState란?useState는 React 함수형 컴포넌트에서 상태 값을 선언하고 제어할 수 있게 해주는 함수입니다.📦 기본 문법const [state, setState] = React.useState(초기값);구성 :항목설명state현재 상태 값setState상태를 업데이트하는 함수초기값state의 초기값 (숫자, 문자열, 배열, 객체 등 가능) 🧪 예제import React from 'react';function Counter() { const [count, setCount] = React.useState(0); // 초기값 0 return ( 현재 카운트: {count} setCount(count + 1)}>+1 );}결과:초기 상태 co..

const [a = 1, b = 2] = [10];console.log(a); // 10console.log(b); // 2const { score = 100 } = {};console.log(score); // 100

const user = { name: "Alice", age: 25 };const { name, age } = user;console.log(name); // "Alice"console.log(age); // 25객체는 키 이름 기준으로 할당됩니다.변수 이름을 바꾸고 싶을 땐 이렇게 씁니다:const { name: userName } = user;console.log(userName); // "Alice"

const arr = [10, 20, 30];const [a, b, c] = arr;console.log(a); // 10console.log(b); // 20console.log(c); // 30 배열의 순서에 따라 변수에 값이 할당됩니다.필요 없는 값은 생략할 수도 있어요:const [x, , z] = [1, 2, 3];console.log(x, z); // 1 3

✅ JSX란?JSX (JavaScript XML) 는 JavaScript 안에서 HTML처럼 보이는 문법입니다.주로 React에서 UI를 구성할 때 사용됩니다.📌 정의: JSX는 JavaScript에 XML/HTML 문법을 결합한 확장 문법(Syntax Extension)🧩 왜 JSX를 사용하는가?React는 UI를 컴포넌트 단위로 구성하는데, JSX는 컴포넌트의 구조를 보기 쉽게 표현해줍니다.예를 들어:jsxconst element = Hello, world!;위 코드는 보기엔 HTML 같지만 실제로는 JavaScript 코드입니다.Babel 같은 도구가 이 코드를 다음과 같이 변환합니다:jsconst element = React.createElement('h1', null, 'Hello, worl..

✅ Babel이란?Babel은 JavaScript 컴파일러로, 최신 JavaScript 문법을 구형 브라우저나 환경에서도 사용할 수 있도록 구버전 JavaScript 코드로 변환해 주는 도구입니다.🔧 왜 Babel이 필요한가?문제:최신 JavaScript(예: ES6+, ES2020 등)는 오래된 브라우저나 환경에서 지원되지 않음예를 들어, async/await, let, const, class, import/export, optional chaining 같은 문법은 구형 브라우저에서 동작하지 않음해결:**Babel이 이 문법들을 구버전 코드로 변환(transpile)**해서 브라우저 호환성 문제를 해결해 줌📦 Babel 주요 기능기능설명코드 트랜스파일최신 JS → ES5 스타일로 변환플러그인 시스템..

React.createElementReact의 핵심 함수로, 새로운 React 엘리먼트를 생성하고 반환합니다.JSX는 이 함수로 컴파일됩니다.대부분의 개발자는 JSX()를 사용하지만 ,동적 컴포넌트 생성이나 JSX를 사용하지 않을 때 유용하게 Hello사용할 수 있습니다 .React.createElement( type, [props], [...children])type: 문자열(예: 'div') 또는 React 구성 요소.props: 요소에 설정할 속성을 포함하는 객체입니다.children: 자식은 문자열, React 요소 또는 이들의 배열일 수 있으며, 개수에 제한이 없습니다.예 1: 기본 사용법jsxconst element = Hello, world!;다음과 동일합니다 React.createEl..

React와 ReactDOM은 React 생태계의 핵심 라이브러리 두 가지입니다.이 둘은 목적이 다르며, 함께 사용되지만 역할이 명확히 나뉘어 있습니다.🔹 React✅ 역할React는 컴포넌트를 만들고 구성하는 역할을 합니다.즉, UI를 정의하고 로직을 구성하는 도구입니다.✅ 주요 기능React.createElement(): React 엘리먼트 생성useState, useEffect 등 훅 제공JSX 문법을 해석할 기반 제공컴포넌트 클래스, 함수형 컴포넌트 등 정의✅ 예시jsximport React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return setCount(count + 1..

🔹 단축키:기능 Windows/LinuxmacOS정의로 이동 (Go to Definition)Ctrl + B 또는 Ctrl + ClickCmd + B 또는 Cmd + Click선언으로 이동 (Go to Declaration)Ctrl + B 또는 Ctrl + ClickCmd + B 또는 Cmd + Click구현으로 이동 (Go to Implementation)Ctrl + Alt + BCmd + Alt + B 👀 인라인 미리보기 (Quick Definition)🔹 단축키:기능Windows/LinuxmacOS정의 미리보기 (Quick Definition)Ctrl + Shift + ICmd + Y 또는 Cmd + Shift + I 예: 함수 이름 위에 커서를 두고 이 단축키를 누르면 팝업창으로 함수 정의가..

**“정의로 이동(Go to Definition)”**은 프로그래밍에서 함수, 변수, 클래스 등 식별자의 선언 위치로 이동하는 기능이에요. function sayHello() { console.log("Hello!");}sayHello(); // 커서를 여기 두고 F12 누르면... sayHello();에 커서를 두고 F12를 누르면위에 선언된 function sayHello() { ... }로 자동으로 점프합니다.✅ 이 기능이 왜 유용할까?코드 구조를 빠르게 파악할 수 있어요.라이브러리나 모듈에서 정의된 내용을 추적할 때 필수예요.함수나 변수의 정의 위치를 찾느라 스크롤할 필요가 없음.💡 팁:F12: 정의로 이동Alt + F12: 정의를 인라인으로 미리 보기Ctrl + Click / Cmd + Cl..