[React.js] 리액트 문법 1 (+ JSX, DOM, API)

JSX

리액트 element를 생성하는 JavaScript 확장 문법이다.

리액트에서는 렌더링 로직이 UI 로직 즉, 이벤트가 처리되거나 시간에 따라 state가 변하는 방식, 화면에 출력할 데이터가 준비되는 방식과 연결된다는 사실을 받아들인다.

따라서 마크업과 로직을 모두 포함하는 '컴포넌트'라는 느슨하게 연결된 유닛으로 분리하여 구성된다.

JSX 안에서는 중괄호 { } 로 감싸서 유효한 모든 JS 표현식을 넣을 수 있다.

JSX 는 표현식이기 때문에, JSX 자체를 if 나 for 반복문 안에서 사용하고, 변수에 할당하고, 인자로 받거나 함수에서 리턴할 수도 있다.

JSX에 속성(attribute)를 전달할 때는 src={user.avatarUrl} 처럼 따옴표를 사용하지 않고, 중괄호만 쓴다. 따옴표는 문자열을 전달해야 할때만 사용한다.

JSX는 HTML보다 JavaScript에 가깝기 때문에, camelCase 프로퍼티 명명 규칙을 사용한다.

DOM

• DOM : Document Object Model, 웹에서 문서의 구조와 내용을 구성하는 객체의 데이터 표현 이다. 즉, 웹문서용 프로그래밍 인터페이스로 프로그램이 문서 구조, 스타일 및 콘텐츠를 변경할 수 있도록 페이지를 나타낸다. DOM은 문서를 노드와 객체로 나타내어서, 프로그래밍 언어가 페이지와 상호 작용할 수 있도록 해준다.
• 웹 사이트를 대화식으로 만드는데 필수적이다. 프로그래밍 언어가 웹 사이트의 컨텐츠, 구조 및 스타일을 조작할 수 있도록 하는 인터페이스이다. 웹 사이트에서 애니메이션을 실행하거나 사용자가 불완전한 양식을 제출하려고 할 때 오류를 표시해주는 등의 결과물은 JavaScript가 DOM에 액세스하고 조작할 결과이다.
• document 객체가 갖고 있는 메소드로 웹페이지를 조작할 수 있는 것이다. 웹 페이지를 조작하고 생성하는데 사용할 수 있는 모든 속성, 메소드 및 이벤트는 객체로 구성된다. 또한 DOM은 함께 작동하는 여러 API를 사용하여 구축된다. 핵심 DOM은 모든 문서와 그 안의 객체를 설명하는 엔터티를 정의하고, 이는 DOM에 새로운 기능을 추가하는 다른 API에서 필요에 따라 확장된다.

기본적인 수준의 웹 사이트는 html 문서로만 구성된다. 따라서 웹 브라우저는 사용자가 보는 웹 사이트를 출력하기 위해서, html 및 css를 해석하고 스타일, 콘텐츠 및 구조를 표시되는 페이지로 렌더링해주는 프로그램이다.

웹 브라우저는 위처럼 html 및 css 스타일과 구조를 구문 분석하는 것 외에도 브라우저는 문서 객체 모델(DOM)이라는 문서 표현도 만든다. 이 모델을 사용하여 JavaScript는 웹 사이트 문서의 텍스트 콘텐츠 및 요소에 객체로 액세스할 수 있다. 웹브라우저 - 검사 - elements 창 아래에 표시되는 내용이 DOM이다.
Document Object : 문서 객체는 웹 사이트에 액세스하고 수정하는데 사용할 수 있는 많은 속성과 메소드가 있는 기본 제공 객체이다. 웹브라우저 - 검사 - console에서 document라고 입력했을 때 나오는 내용은 엘리먼츠의 DOM 내용과 똑같다.

브라우저에서 생성된 DOM과 HTML 소스코드가 다른 2가지 경우는 콘솔에서 javascript를 이용해서 수정한 경우와 table 태그와 같이 개발자가 빠트린 태그 오류를 브라우저가 자동으로 수정하는 경우이다.

문서 객체 모델은 웹 페이지를 나타내는 HTML과 같은 문서의 구조를 메모리에 푯하여 웹 페이지를 스크립트 또는 프로그래밍 언어에 연결한다. 또한 DOM은 논리적 트리가 있는 문서를 나타낸다. 트리의 각 분기는 노드에서 끝나고 각 노드에는 객체가 포함된다. DOM 메소드를 사용하면 트리에 프로그래밍 방식으로 액세스를 할 수 있다. 이를 사용하여 문서의 구조, 스타일 또는 내용을 변경할 수 있다.

* 렌더링: 서버로부터 HTML 파일을 받아서 브라우저에 뿌려주는 과정이다. 우선, 브라우저가 서버로부터 HTML 문서를 다운받고, 렌더링 엔진은 HTML 문서를 파싱해서 DOM 트리를 만든다.

• 파싱
• DOM 트리

API

• API : 애플리케이션 스프트웨어를 빌드하고 통합하기 위한 정의 및 프로토콜 세트인 Application Programming Interface이다.

API를 사용하여 구현 방식을 알지 못하는 제품 또는 서비스와도 통신할 수 있으며, Application 개발을 간소화하여 시간과 비용을 절약할 수 있다. 즉, 새로운 툴과 제품을 설계하거나 관리할 때 API 사용으로 유연성을 높이고 설계, 관리, 사용 방법을 간소화하며 혁신의 기회를 얻을 수 있다.

API는 당사자들 간 계약을 나타내는 도큐멘테이션을 갖춘 계약으로 비유되기도 한다. 한쪽 당사자가 특정한 방식으로 구성된 원격 요청을 보내면 다른 쪽 당사자의 소프트웨어가 이에 응답하는 방식이기 때문이다. API는 클라우드 네이티브 애플리케이션 개발을 통해 자체 인프라를 연결하는 간소화된 방식이지만, 고객 및 외부 사용자와의 데이터 공유를 허용하기도 한다. 이러한 public API는 파트너와의 연결 방식을 간소화하고 확대할 수 있을 뿐 아니라, 보유한 데이터를 활용해 수익을 창출할 수 있기 떄문에 고유의 비즈니스 가치를 지니게 된다.

API를 통해 데이터에 액세스할 수 있으므로 한곳에서 정보를 통합할 수 있다. 그리고 API 작동에 변화가 없는 한, 개발자는 다른 사용자에게 영향을 미치지 않고 내부 시스템을 변경할 수 있다. 공개적으로 제공되는 API를 이용해서 또 다른 지원 목적의 애플리케이션을 개발할 수도 있으며, 이는 새로운 비즈니스 및 수익 창출의 기회가 된다.

따라서 API는 리소스에 대한 액세스 권한을 제공하고 보안과 제어를 유지할 수 있게 해서, 이 액세스 권한을 어떻게, 누구에게 제공할지 여부만 결정하면 된다. 원격 API는 커뮤니케이션 네트워크를 통해 상호 작용하도록 설계되었고, 원격이란 말은 API에 의해 조작되는 리소스가 요청을 보내는 컴퓨터의 외부에 있다는 것을 의미한다. 가장 광범위하게 사용되는 커뮤니케이션 네트워크가 인터넷이기 때문에 대부분의 API는 웹 표준을 기반으로 설계되며, 모든 원격 API가 웹 API는 아니지만 웹 API가 원격이라고는 할 수 있다.

참조링크

• DOM 소개
• DOM(문서 개체 모델)
• 스크립트 언어
• API란?