DIL: 모던 리액트 딥 다이브, 1주차-3

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week1-3_2024-03-06

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------ | ----------- | | 1주차 | 1, 2장 | 리액트 핵심요소와 자바스크립트 | 93p~123p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 8시 45분~12시
오늘 많이 읽어야함, 목표 2.x까지? => ㅇ

Array의 map, filter, reduce, forEach

• [ES5]이니까 트랜스파일, 폴리필 부담없음
• 기존 배열의 값 건드리지 않으므로 안전~
• 📌reduce 한 줄 설명: 콜백함수와 함께 초기값을 인수로 받는데, 초기값에 따라 배열, 객체 등을 반환할 수 있는 Array 프로토타입의 메서드이다

// 가독성에 주목
const result1 = arr.filter((item) => item % 2 === 0).map((item) => item * 100); // 하지만 배열을 2번 돈다

const result3 = arr.reduce((result, item) => {
  if (item % 2 === 0) result.push(item);
  return result;
}, []);

• forEach의 특징s
  • 반환값: undefined
  • break, return해도 순회를 멈출 수 없음: 무조건 O(n)
• ECMAScript
  • https://github.com/tc39/proposals

TypeScript

• TypeScript is JavaScript with syntax for types.
• 동적 타입 언어의 단점: 에러를 코드를 실행했을 때 확인한다
  • => 타입스크립트: 타입 체크를 정적으로 런타임이 아닌 빌드(트랜스파일) 타임에 수행
• TypeScript Playground: https://www.typescriptlang.org/play

| 구분 | 기능 | 사용 예시 | | --------------- | ----------------------------------- | -------------------------------------------------- | | instanceof | 특정 클래스의 인스턴스인지 확인 | 에러 핸들링 시 사용 (HttpError, AxiosError etc...) | | typeof | 특정 값의 자료형인지 확인 | 요소의 자료형 체크 | | in | property in object | 주로 어떤 객체에 키가 존재하는 확인 | | generic | 단일 타입이 아닌 다양한 타입에 대응 | useState 선언할 때 많이 봄 | | index signature | 키에 원하는 타입을 부여할 수 있다 | 타입 단언 hello[key as keyof Hello] |

그 외

• Flow라는 정적 타입 라이브러리도 있었다(페이스북)
  • 기존 자바스크립트 코드에 애너테이션
  • (페이스북) yarn이나 jest도 TS로 재작성됨
• (MS) VSC의 Definitely Typed
  • @types

unknown

• top type, type narrowing이 필요

function doSomething(callback: unknown) {
  if (typeof callback === "function") {
    callback();
    return;
  }

  throw new Error("callback is not a function");
}

never

• bottom type
• 어디다 쓰냐?
  • class component에서 Props가 비었음을 나타낼 때 type Props = Record<string, never>

Generic

• 제너릭

function multipleGeneric<First, Last>(a1: First, a2: Last): [First, Last] {
  return [a1, a2];
}

const [a, b] = multipleGeneric<stirng, boolean>("true", true);

• 인덱스 시그니처

// type Hello = Record<"hello" | "hi", string>;
type Hello = { [key in "hello" | "hi"]: string };

const hello: Hello = {
  hello: "👋",
  hi: "🖐️",
};

• key 단언

Object.keys(hello).map((key) => hello[key as keyof Hello]);

• keysOf 헬퍼를 만들어서, string[] 대신 개발자가 단언한 타입으로 강제하기

function keysOf<T extends Object>(obj: T): Array<keyof T> {
  return Array.from(Object.keys(obj)) as Array<keyof T>;
}

keysOf(hello).map((key) => hello[key]);

Object.keys가 string[]으로 강제되어 있는 이유?

• 타입 체크를 할 때, 그 값이 가진 형태에 집중하기 때문
• One of TypeScript's core principles in that type checking focuses on the shape that values have. This is sometimes called "duck typing" or "structural subtyping".
• Exact 타입이 생길 수도~?

타입스크립트 전환 가이드

• tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

2.1 JSX

• 트랜스파일러를 거치지 않으면 오류가 나는 이유 > JS 표준 코드가 아님
• 목적: (1) HTML, XML을 JS 내부에 표현 (2) 트리 구조를 토큰화 -(트랜스파일)-> ECMAScript로 변환
• XML과 비슷하게 보이는 이유? JS 개발자가 친숙하게 느끼기 위해
• JS 내부에서 표현하기 까다로웠던 XML 스타일의 트리 구문 작성을 도움

정의

JSXElement, JSXAttribute, JSXChildren, JSXString

▷ JSXElement

• JSXOpeningElement, JSXClosingElement, JSXAttributes, JSXSelfClosingElement

<JSXOpeningElement JSXAttributes(optional)>
</JSXClosingElement>

<JSXSelfClosingElement JSXAttributes(optional) />

<></>

• 리액트 컴포넌트를 파스칼로 만들어야 하는 이유?
  • React에서 HTML 태그명과 사용자가 만든 태그명을 구분지으려고 한 것

JSXElementName

• JSXIdentifier, JSXNamespacedName, JSXMemberExpression

JSXMemberExpression

| 특징 | 설명 | | ------ | ----------------------------------------------------------------------------------------------- | | 역할 | 객체의 속성에 접근하기 위해 사용됨 | | 표기법 | 객체와 속성 사이에 점 표기법을 사용 (예: object.property) | | 예시 | <Component.foo />에서 Component는 객체를 나타내고, foo는 해당 객체의 속성을 나타냄 | | 예제 | https://codesandbox.io/p/sandbox/mordern-react-deep-dive-t9vlwm?file=%2Fsrc%2FApp.tsx%3A25%2C18 | | 특징 | n개 묶을 수 있으나 => JSXNamespacedName와 이어서는 x |

JSXIdentifier

| 특징 | 설명 | | ------ | ----------------------------------------------------------------------------------------------------- | | 역할 | 요소 이름이나 속성 이름을 나타냄 | | 표기법 | 일반적으로 태그 이름이나 속성 이름을 나타내며, 네임스페이스를 사용하지 않음 | | 예시 | 에서 div는 요소의 이름을 나타냄 | | 특징 | 자바스크립트의 식별자와 동일하게 (1)$, _ 외의 다른 특문으로 시작할 수 없음 (2) 숫자로 시작할 수 없음 |

JSXNamespacedName

| 특징 | 설명 | | ------ | ---------------------------------------------------------------------------------------- | | 역할 | XML 네임스페이스를 사용하여 요소를 정의함 ex) RSS, SVG | | 표기법 | 네임스페이스와 요소 이름 사이에 콜론(:)을 사용하여 구분함 | | 예시 | <svg:rect />에서 svg는 네임스페이스를 나타내고, rect는 요소의 이름을 나타냄 (XML 네임스) | | 특징 | 2개 이상은 올바른 식별자로 취급되지 않음 |

▷ JSXAttributes

(optional) JSXSpreadAttribute, JSXAttribute

• JSXSpreadAttribute: 전개 연산자, {...AssignmentExpression}
• JSXAttribute: 키 값 쌍, {JSXAttributeName: JSXAttributeValue}
  • JSXAttributeValue: "문자열", '문자열', {AssignmentExpression}, JSXElement

▷ JSXChildren

JSXChild

• JSXChild: JSXChildren은 JSXChild를 0개 이상 가짐
  • JSXText: {, }, <, > 제외
  • JSXElement
  • JSXFragment
  • { JSXChildExpression (optional) }

    <>{(() => "👍")()}</>
    

▷ JSXString

• const message = "This is a \"quoted\" string"

---

english
structural subtyping: 구조적 서브타이핑