react 기초

🌱 1. let & const

변수를 만드는 방법이에요.

키워드의미다시 값 바꿀 수 있어?

let	변경 가능한 변수	✅ 가능
const	고정된 변수 (constant)	❌ 불가능

예시 👇

 

let name = "Tom"; name = "Jerry"; // 가능! const age = 20; age = 25; // ❌ 오류! const는 바꿀 수 없음

💡 정리:
이제 var는 거의 안 써요.
👉 값을 바꿀 거면 let, 안 바꿀 거면 const!

---

⚡ 2. Arrow Function (화살표 함수)

함수를 짧게 쓰는 방법이에요.

기존 함수 👇

 

function sayHi(name) { console.log("Hi " + name); }

같은 기능을 화살표 함수로 👇

 

const sayHi = (name) => { console.log("Hi " + name); };

줄일 수도 있어요 👇

 

const sayHi = name => console.log("Hi " + name);

👉 화살표 함수는 문법이 짧고,
this라는 키워드의 동작이 더 예측 가능해서 리액트에서 진짜 자주 써요!

---

📦 3. Export & Import

파일을 나누어 쓸 때 “가져오고 내보내기” 하는 문법이에요.

예시 1️⃣ (내보내기)

 

// person.js export const name = "Tom"; export default function sayHi() { console.log("Hi!"); }

예시 2️⃣ (가져오기)

 

// app.js import sayHi, { name } from "./person.js"; sayHi(); // Hi! console.log(name); // Tom

💡 정리:

• export default → 한 파일에 1개만 가능
• export const → 여러 개 가능
• import * as something → 전부 가져올 때

---

🧱 4. Class (클래스)

객체를 만드는 “틀”이에요.

예시 👇

 

class Person { name = "Tom"; sayHi() { console.log("Hi, I'm " + this.name); } } const person1 = new Person(); person1.sayHi(); // Hi, I'm Tom

💡 정리:

• class는 객체를 쉽게 만드는 방법
• extends를 쓰면 상속도 가능 (다른 클래스 기능 물려받기)

---

🌈 5. Spread & Rest Operator (...)

점 세 개로 배열이나 객체를 “펼치거나 묶는” 문법이에요.

📤 Spread (펼치기)

 

const oldArray = [1, 2, 3]; const newArray = [...oldArray, 4]; // [1,2,3,4] const person = { name: "Tom" }; const newPerson = { ...person, age: 20 }; // { name: "Tom", age: 20 }

📥 Rest (묶기)

 

const sum = (...numbers) => { return numbers.reduce((a, b) => a + b); }; sum(1, 2, 3, 4); // 10

💡 정리:

• Spread → 복사하거나 추가할 때
• Rest → 여러 개를 한 번에 받거나 묶을 때

---

🎁 6. Destructuring (구조 분해)

객체나 배열에서 필요한 값만 꺼내 쓰는 방법이에요.

배열

 

const arr = [10, 20, 30]; const [a, b] = arr; console.log(a); // 10 console.log(b); // 20

객체

 

const person = { name: "Tom", age: 20 }; const { name } = person; console.log(name); // Tom

💡 함수에서 자주 써요!

 

const printName = ({ name }) => { console.log(name); }; printName({ name: "Tom", age: 20 }); // Tom

---

✨ 한 줄 요약

기능한 줄 설명리액트에서 왜 중요?

let / const	변수 만들기	상태, props 등 관리
Arrow Function	짧은 함수 문법	컴포넌트 정의할 때
Export / Import	파일 나누기	컴포넌트 가져오기
Class	객체 설계 틀	옛날 리액트 방식 (지금은 함수형이 많음)
Spread / Rest	펼치기 & 묶기	props 전달, 배열 복사
Destructuring	필요한 값만 꺼내기	props 쉽게 받기