Js & Ts & React 문법

JavaScript / TypeScript / React 문법 정리 (기초 + 심화)

📌 JavaScript 문법 정리

1. 변수 선언 방식

// var: 함수 레벨 스코프, 중복 선언 가능, 호이스팅됨 (초기화는 undefined)
var x = 1;

// let: 블록 레벨 스코프, 중복 선언 불가, 호이스팅됨 (초기화 전 참조 불가)
let y = 2;

// const: 블록 레벨 스코프, 재할당 불가, 상수 값 정의에 사용
const z = 3;

2. 화살표 함수 (Arrow Function)

// 인자가 2개일 때
const add = (a, b) => a + b; // return 생략 가능

// 인자가 1개일 때 괄호 생략 가능
const square = x => x * x;

// 인자가 없을 때는 괄호 필수
const sayHi = () => console.log("Hi");

// 여러 줄 로직이 있으면 중괄호 + return
const multiply = (a, b) => {
  const result = a * b;
  return result;
};

// 객체 반환 시 괄호 필요
const getUser = () => ({ name: "Alice", age: 30 });

// 배열 반환
const getList = () => [1, 2, 3];

3. 전개 연산자 (Spread / Rest)

// 배열 복사 및 추가
const arr = [1, 2, 3];
const newArr = [...arr, 4];

// 객체 복사 및 속성 덮기
const user = { name: "Tom" };
const newUser = { ...user, age: 20 };

// Rest 파라미터로 가변 인자 처리
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);

4. 비구조화 할당

// 객체
const person = { name: "Alice", age: 30 };
const { name, age } = person;

// 배열
const colors = ["red", "green", "blue"];
const [first, second] = colors;

5. 삼항 연산자

const result = age > 18 ? "Adult" : "Minor";

6. 옵셔널 체이닝 & Null 병합

const city = user?.address?.city; // 중첩 객체가 없어도 안전하게 접근 가능
const name = user.name ?? "Guest"; // null/undefined 시 기본값 지정

7. 반복문

// 배열 요소 순회
for (const val of [1, 2, 3]) {
  console.log(val);
}

// 객체 키 순회
const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]);
}

---

📌 TypeScript 문법 정리

1. 기본 타입

let age: number = 30;
let name: string = "Alice";
let isActive: boolean = true;
let tags: string[] = ["ts", "react"];
let tuple: [string, number] = ["age", 30];

2. 함수 타입 지정

function greet(name: string): string {
  return `Hello, ${name}`;
}

const add = (a: number, b: number): number => a + b;

3. 인터페이스 & 타입

interface User {
  id: number;
  name: string;
  email?: string; // 선택적 속성
}

const user: User = { id: 1, name: "Tom" };

4. 유니온 타입, 리터럴 타입, 타입 별칭

let value: string | number;
type Direction = "left" | "right";

5. 제네릭

function wrap<T>(value: T): T[] {
  return [value];
}

6. 타입 단언 & Non-null 단언

const input = document.querySelector("#input") as HTMLInputElement;
const el = document.getElementById("app")!;

7. 타입 추론

let text = "hello"; // string으로 추론됨

8. 타입 확장 및 인터섹션

type Animal = { name: string };
type Dog = Animal & { breed: string }; // 교차 타입 (intersection)

---

📌 React 문법 정리

1. 함수형 컴포넌트

function Hello({ name }: { name: string }) {
  return <h1>Hello, {name}</h1>;
}

2. useState

const [count, setCount] = useState<number>(0);

3. useEffect

useEffect(() => {
  console.log("Mounted or Updated");
  return () => {
    console.log("Clean up");
  };
}, [count]);

4. useReducer

// reducer 함수 정의
function reducer(state: number, action: { type: string }): number {
  switch (action.type) {
    case "INCREMENT": return state + 1;
    case "DECREMENT": return state - 1;
    default: return state;
  }
}

const [count, dispatch] = useReducer(reducer, 0);

5. 이벤트 핸들링

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  alert("clicked");
};

6. 조건부 렌더링

return isLoggedIn ? <LogoutButton /> : <LoginButton />;

7. 리스트 렌더링

const items = ["A", "B"];
return (
  <ul>
    {items.map((item, index) => <li key={index}>{item}</li>)}
  </ul>
);

8. props & children

const Card = ({ children }: { children: React.ReactNode }) => {
  return <div className="card">{children}</div>;
};

9. Context API

const ThemeContext = React.createContext("light");

const App = () => (
  <ThemeContext.Provider value="dark">
    <Page />
  </ThemeContext.Provider>
);

const Page = () => {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
};

10. React Router (v6 기준)

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

const App = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </BrowserRouter>
);

---

✅ 요약 정리

• JavaScript: 화살표 함수, 비구조화, 스프레드/Rest, 옵셔널 체이닝은 핵심 문법이다.

• TypeScript: 타입 안정성을 위해 함수, 객체, 배열, 제네릭 등 모든 구조에 타입을 선언하는 것이 중요하다.

• React: 상태 관리(useState, useReducer), 사이드이펙트(useEffect), 라우팅(react-router-dom), 전역 상태(Context API)가 필수 개념이다.