React2

리액트 핵심 요소 깊게 살펴보기

2.1 JSX란?

• 자바스크립트 내부에서 표현하기 까다로웠던 XML 스타일의 트리 구문을 작성하는 데 많은 도움을 주는 새로운 문법
• 자바스크립트 표준 코드가 아닌 페이스북이 임의로 만든 새로운 문법
• JSX는 반드시 트랜스파일러를 거쳐야 비로소 자바스크립트 런타임이 이해할 수 있는 의미 있는 자바스크립트 코드로 변환된다.

2.1.1 JSX의 정의

• JSXElement
  • JSX를 구성하는 가장 기본 요소
  • HTML의 요소(element)와 비슷한 역할
    • JSXOpeningElement: JSXOpening으로 시작했다면 후술할 JSXClosingElement가 동일한 요소로 같은 단계에서 선언돼 있어야함.
    • JSXClosingElement: 반드시 JSXOpeningElement와 쌍으로 사용돼야 한다.
    • JSXSelfClosingElement: 요소가 시작되고, 스스로 종료되는 형태를 의미
    • JSXFragment: 아무런 요소가 없는 형태로, JSXSelfClosingElement 형태를 띨 수는 없다.
    • 리액트에서 HTML 구문 이외에 사용자가 컴포넌트를 만들어 사용할 때에는 반드시 대문자로 시작하는 컴포넌트를 만들어야만 사용가능.
    • 이는 JSXElement에 명시돼 있는 표준에는 없는 내용인데, 그 이유는 리액트에서 HTML 태그명과 사용자가 만든 컴포넌트 태그명을 구분 짓기 위해서다.
• JSXAttributes
  • JSXElement의 요소 이름으로 쓸 수 있는 것을 의미
  • JSXIdentifier: JSX 내부에서 사용할 수 있는 식별자를 의미. 이는 자바스크립트 식별자 규칙과 동일. <$></$>, <_>도 가능하지만 자바스크립트와 마찬가지로 숫자로 시작하거나 $와 _외의 다른 특수문자로는 시작할 수 없다.
  • JSXNamespacedName: JSXIdentifier:JSXIDentifier의 조합, 즉 :을 통해 서로 다른 식별자를 이어주는 것도 하나의 식별자로 취급된다. :로 묶을 수 있는 것은 한 개뿐이다. 두 개 이상은 올바른 식별자로 취급하지 않는다.
  • JSXMEmeberExpression: JSXIdentifier.JSXIdentifier의 조합. 즉 .을 통해 서로 다른 식별자를 이어주는 것도 하나의 식별자로 취급된다 :로 묶는 JSXNamespacedName과는 다르게 .을 여러 개 이어서 하는 것도 가능하다. 단 JSXNamespacedName과 이어서 사용하는 것은 불가능하다.
• JSXChildren
  • JSXElement에 부여할 수 있는 속성을 의미한다.
  • JSXSpreadAttributes: 자바스크립트의 전개 연산자와 동일한 역할
  • JSX
• JSXStrings

  2.1.2 JSX 예제

  2.1.3 JSX는 어떻게 자바스크립트에서 변환될까?

  2.1.4 정리

2.2 가상 DOM과 리액트 파이버

2.2.1 DOM과 브라우저 렌더링 과정

2.2.2 가상DOM의 탄생배경

2.2.3 가상DOM을 위한 아키텍처, 리액트 파이버

2.5.4 파이버와 가상 DOM

2.2.5 정리

2.3 클래스형 컴포넌트와 함수형 컴포넌트

2.3.1 클래스형 컴포넌트

2.3.2 함수형 컴포넌트

2.3.3 함수형 컴포넌트 vs. 클래스형 컴포넌트

2.3.4 정리

2.4 렌더링은 어떻게 일어나는가?

2.4.1 리액트의 렌더링이란?

2.4.2 리액트의 렌더링이 일어나는 이유

2.4.3 리액트의 렌더링 프로세스

2.4.4 렌더와 커밋

2.4.5 일반적인 렌더링 시나리오 살펴보기

2.4.6 정리

2.5 컴포넌트와 함수의 무거운 연산을 기억해 두는 메모이제이션

2.5.1 주장1: 섣부른 최적화는 독이다, 꼭 필요한 곳에만 메모이제이션을 추가하자

2.5.2 주장2: 렌더링 과정의 비용은 비싸다, 모조리 메모이제이션해 버리자

2.5.3 결론 및 정리