0012. Front-end 공부하기3 - JSX, Element, 시계만들기(Feat. 인프런, 처음 만난 리액트)

섹션 3. JSX

1강 : JSX의 정의와 역할

개념 : A syntax extension to JavaScript, 자바스크립트 확장 문법

문법을 확장시킨 방법 : JavaScript + XML/HTML

 

 

JS : JavaScript

자바스크립트 관련 라이브러리도 이름 뒤에 JS가 붙어서 자바스크립트 라이브러리라는 것을 나타

리액트 풀네임 : ReactJS

 

JSX의 역할 : 

JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거침. 그래서 JSX로 작성해도 최종적으로 JavaScript 코드가 나오게 됨. 여기서 JSX를 JS로 바꾸는 함수가 React의 creatElement 함수임.

 

그래서 리액트에서 JSX를 쓰는 것이 필수는 아님. 모든 코드를 creatElement 함수를 사용해서 개발하면 되기 때문. 다만, JSX를 사용하면 코드가 간결해지고 생산성과 가독성이 올라감. 

 

React의 파라미터

1. type : div, span 같은 html 태그가 올 수도 있고, 다른 React 컴포넌트가 들어갈 수도 있음

2. props : 속성

3. children : 엘리먼트가 포함하고 있는 자식 엘리먼트

 

 

2강 : JSX의 장점 및 사용법

JSX의 장점

- 간결한 코드

- 가독성 향상 : 코드작성, 유지보수 관점에서 중요함(버그를 발견하기 쉬움)

- Injection Acctacks 방어 : 잠재적인 보안 위협을 줄일 수 있음

 

JSX의 사용법

JavaScript 코드 + XML/HTML 코드를 섞어서 쓰면 됨

XML/HTML 코드 중간에 JS코드를 쓰고 싶다면 중괄호{}로 묶어주면 됨

• ... XML/HTML
  {JavaScript 코드}
  ... XML/HTML

 

HTML 태그 중간이 아닌 태그의 속성에 값을 넣고 싶을 때

: 큰 따옴표 사이에 문자열을 넣거나 중괄호 사이에 JS 코드를 넣으면 됨

중괄호가 사용되었다 -> JS 코드가 사용되었다!라고 외워도 됨

 

JSX를 사용해서 Children을 정의하는 방법

 

 

3강. (실습) JSX 코드 작성해 보기

너무 읽기 싫게 생겼다..

 

 

진짜 오류가 100개 정도는 발견된 거 같다.

이번에도 챗GPT 선생님이 해결해 주셨다..

챗GPT 없을 때는 코딩 어떻게 했을지 상상도 안 간다..

 

야호!

 

 

섹션 4. Rendering Elements

1강. Element의 정의와 생김새

이 섹션을 시작하기 전에 Rendering이 뭔지 기억나지 않아서 다시 챗GPT 선생님께 물어봤다.

 

렌더링(Rendering)이란, 웹 개발 및 컴퓨터 그래픽스에서 널리 사용되는 용어로, 데이터를 시각적으로 표현하는 과정을 말합니다. 웹 개발의 컨텐스트에서 렌더링은 주로 HTML, CSS, JavaScript 등을 사용하여 사용자 인터페이스를 웹 브라우저에 표시하는 과정을 의미합니다.

렌더링의 주요 포인트는 다음과 같습니다.

1. HTML 렌더링 : 웹 페이지의 기본 구조와 콘텐츠를 정의합니다. HTML 요소는 텍스트 콘텐츠, 링크, 이미지, 버튼 등 다양한 구성 요소를 나타냅니다.
2. CSS 렌더링 : 스타일링과 레이아웃을 정의합니다. CSS는 HTML 요소의 색상, 크기, 위치 등 시각적인 부분을 꾸미고 구성하는 데 사용됩니다.
3. JavaScript 렌더링 : 동적인 상호작용과 데이터 처리를 담당합니다. JavaScript를 사용하면 웹 페이지의 콘텐츠를 사용자의 상호작용에 따라 실시간으로 변경할 수 있습니다.

예를 들어, React와 같은 JavaScript 라이브러리/프레임워크에서 렌더링은 웹 페이지에 컴포넌트를 표시하는 과정을 의미합니다. 개발자는 컴포넌트를 정의하고, 이러한 컴포넌트가 사용자에게 어떻게 보일지 결정합니다. 그 후, React는 이러한 컴포넌트를 실제 브라우저 DOM에 렌더링 하여 사용자가 볼 수 있게 합니다.

따라서, 렌더링은 사용자가 웹 페이지를 방문할 때 뒤에서 일어나는 중요한 과정으로, 웹 페이지의 콘텐츠가 시작적으로 표현되는 방식을 결정합니다.

 

음.. 100% 이해한 것 같지는 않지만 어떤 느낌인지는 알 것 같아서 강의를 다시 듣기로 했다.

 

 

• Element : 어떤 물체를 구성하는 성분
  - 리액트 앱을 구성하는 가장 작은 블록들을 말함
  - 별도의 설명이 없다면 대부분 React Element를 칭함
• React Element : Virtual DOM에 존재하는 엘리먼트, DOM 엘리먼트의 가상 표현
• DOM Element(Descriptor) : 화면에 나타나는 내용을 기술하는 자바스크립트 객체

 

React Elements : 화면에서 보이는 것들을 기술

자바스크립트 객체 형태로 존재

컴포넌트의 유형과 속성, 내부의 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체

실제로 우리 눈에 보이는 것을 기술

 

 

2강. Element의 특징 및 렌더링 하기

특징 : 불변성 immutable

• mutable : 변할 수 있는
• immutable : 불변의

 

불변성 : 한번 생성된 엘리먼트는 변하지 않는다.

• Element 생성 후에는 Children이나 attributes를 바꿀 수 없다!
  - 붕어빵이 구워져서 나오면 속 내용은 이후에 바꿀 수 없는 것과 비슷하다.
  컴포넌트 : 붕어빵 틀
  엘리먼트 : 붕어빵, 엘리먼트를 바꾸는 것이 아니라 새로운 엘리먼트를 생성해서 교체하는 게 빠르다.
  - 화면이 갱신되면 바뀐 부분만 교체해서 빠르게 렌더링(State Change -> Compute Diff -> Re-render)
• Element 렌더링 하기
  React 엘리먼트 : React Virtual DOM에 존재
  DOM 엘리먼트 : 실제 브라우저 DOM에 존재
  - React 엘리먼트 렌더링 : Virtual DOM에서 실제 DOM으로 이동하는 과정
• 렌더링 Element 업데이트하기
  - 불변성 때문에 업데이트를 하기 위해서는 다시 생성해야 함

3강. (실습) 시계 만들기