[React] Day_57 데일리 정리

 

과제랑_싸우는_ㄴr

 

롤알못은 과제발제듣고

아... 게임... 아하하.... (오열ing)

강의 호도독 듣고 빠르게 작업해보도록 하죠.

레고.

 

 

Next.js 강의 정리 - React(리액트)와 TypeScript (타입스크립트)

반갑다, 따입스끄립뜨.

 

이제 너랑 next.js 배우면 끝이야.

 

 

TypeScript (타입스크립트)

자바스크립트의 모든 기능을 포함한 상위 집합 언어

추가로 정적 타입 시스템을 제공 → 코드의 안정성 향상 및 런타임 오류를 줄이는 데 도움

 

cf. 정적 타입 시스템이란?

• 정적 타입: 코드 작성 시 변수와 표현식의 타입을 컴파일 타임에 확인하여 오류를 사전에 방지.
• 타입 시스템은 데이터의 형태와 구조를 이해하고 해석하는 규칙 집합입니다.

 

+) TypeScript 프로젝트 설정

npm create vite@latest my-react-ts-app -- --template react-ts
cd my-react-ts-app
npm install

 

 

- 예시

const name: string = "TypeScript";
const age: number = 25;

 

- JavaScript vs TypeScript 

특징	JavaScript	TypeScript
타입 시스템	동적 타입	정적 타입
컴파일	필요 없음	JavaScript로 컴파일 필요
개발 경험	유연하고 빠르게 시작 가능	코드 완성, 타입 검사 등으로 개선된 개발 경험
프로젝트 규모	소규모 프로젝트에 적합	대규모 프로젝트에 적합
런타임 오류	실행 중 오류 발견 가능	컴파일 시 오류 발견 가능

 

 

Type (타입) 선언하기

 

- 값이 어떤 속성과 메서드를 가지는지 정의

const message: string = "Hello, TypeScript";
console.log(message.toUpperCase());

 

 

주요 타입

 

1. 기본 타입

- string, number, boolean, null, undefined

 

2. 배열 타입

let fruits: string[] = ["Apple", "Banana"];

 

3. 객체 타입

interface User {
    name: string;
    age: number;
}
let user: User = { name: "Alice", age: 25 };

 

4. 유니온 타입

 let value: string | number = "TypeScript";

 

5. 제네릭 타입

function identity<T>(arg: T): T {
    return arg;
}

 

 

타입 어노테이션과 타입 추론

 

- 타입 어노테이션

변수, 함수 등의 타입을 명시적으로 선언하는 방식

let username: string = "Alice";
const add = (a: number, b: number): number => a + b;

 

- 타입 추론

TypeScript는 코드의 문맥을 기반으로 타입 자동으로 추론

let num = 42; // number로 추론
let isDone = true; // boolean으로 추론

 

 

제네릭(Generic)

 

타입을 변수처럼 사용 → 여러 타입을 유연하게 처리할 수 있습니다.

function getItems<T>(items: T[]): T[] {
    return [...items];
}
const numbers = getItems<number>([1, 2, 3]);
const strings = getItems<string>(["a", "b", "c"]);

 

 

Utility type (유틸리티 타입)

 

- 주요 유틸리티 타입

 

1. Partial<T>: 모든 프로퍼티를 선택적으로 만듭니다.

interface Todo {
    title: string;
    completed: boolean;
}
type PartialTodo = Partial<Todo>;

 

2. Pick<T, K>: 특정 프로퍼티만 선택합니다.

type TodoTitle = Pick<Todo, "title">;

 

3. Omit<T, K>: 특정 프로퍼티를 제외합니다.

type TodoWithoutCompleted = Omit<Todo, "completed">;

 

 

고오급 TypeScript

 

조건부 타입 (조건에 따라 타입 분기)

type IsString<T> = T extends string ? "string" : "not string";
type Test = IsString<number>; // "not string"

 

제네릭 제약 조건

function logLength<T extends { length: number }>(arg: T): T {
    console.log(arg.length);
    return arg;
}

 

 

React 18 주요 기능

 

- useId (컴포넌트별 고유 ID 생성)

const id = useId();
<input id={id} />;

 

- useTransition (렌더링을 지연시켜 UX 개선)

const [isPending, startTransition] = useTransition();
startTransition(() => setState(newState));

 

 - Suspense (비동기 작업을 처리할 때, 대체 UI 제공)

<Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
</Suspense>

 

 

 

 

마무리 - 정신차려..! 림졍! 

 

와장창! (터진 림졍의 멘탈입니다.)

 

연말 빅 서프라이즈 이슈로 인해

림졍은 SPA 프로젝트를 포기했다!

대신 강의랑 팀플이랑.. 과제에 집중을 하기로 하는데...

과연, 그녀는 순조롭게 마무리를 지을 수 있을까?!

To be continued....

 

 

오늘의 KPT 회고

 

Keep: 싱싱미역 상태로 강의 잘 따라가는중(?)

Problem: 비상! 비상! 상태이상!

Try: 꾸역꾸역 해내긔