[⚛React] React Element, React Component 그리고 JSX

글 작성자: 주인 빠리 택시 운전사

⚛ React Element

type 과 props 를 가지는 React의 객체

React 라이브러리에 있는 React.createElement(...) 를 이용하여 만들 수 있으며 type 으로 HTML 태그 이름을 가지고 그 이외의 특징을 props 로 관리하는 객체 형태로 정의된다.

// createElement를 이용해서 React Element 만들기 React.createElement( 'div', { className: 'name' }, 'React' )

// createElement를 이용해서 만들어진 React Element 객체 { type: 'div', props: { className: 'name', children: 'React' } }

그러나 이런 함수를 이용하는 방식은 코드가 지저분해서 가독성이 떨어지고 하나하나 타이핑하는게 어렵기 때문에 JSX 라는 JavaScript 를 확장한 문법을 신태틱 슈가로 사용한다.

React

좀 더 복잡한 구조의 경우의 JSX 를 사용했을 때와 사용하지 않았을 때 가독성을 비교해보면 차이가 확연히 드러날 것이다.

// JSX를 사용한 경우 OK!

/// JSX를 사용하지 않은 경우 React.createElement( 'button', { className: 'btn-gold' }, React.createElement( 'strong', null, 'OK!' ) );

⚛ React Component

props 를 받아서, React Element 를 반환하는 함수 혹은 클래스

React Element Tree 를 캡슐화한다. // Button.jsx function Button(props){ return( {props.children} ) } 혹은 ES6 의 화살표 함수를 이용하면 다음과 같이 표현할 수 있다. // Button.jsx const Button = (props) => ( {props.children} ) React Component 도 다음과 같이 JSX 에서 사용할 수 있다. OK!

✍️ React Component 규칙

대문자로 시작 - React Component 가 포함된 파일명이나 React Component 의 첫 문자는 대문자로 작성되어야한다. e.g. 버튼에 대한 React Component 를 만들고자하면 이름은 ... 으로 만들고 파일명은 Button.jsx 으로 작성되어야한다.

JSX

JSX 는 HTML 형태의 JavaScript Object 를 사용하는 확장된 JavaScript 문법으로, 위에 React Element 에서 언급했던 것처럼, JSX 는 결과물로 React Element 를 생성한다.

const element = Hello, world!;

let element = React.createElement( 'h1', { className: 'greeting' }, 'Hello, World!' )

태그 규칙

기본 HTML 태그는 소문자로 시작한다.

태그는 소문자로 시작한다. 사용자가 정의한 React Component 는 HTML 태그와 구분하기 위해 대문자로 시작한다.

는 태그와 구분하기 위해 대문자로 시작한다. HTML 에서는 같은 특정 태그만 self-closing 가능한 반면 JSX 에서는 모든 태그가 처럼 self-closing 가능하다.

에서는 같은 특정 태그만 가능한 반면 에서는 모든 태그가 처럼 가능하다. 자식 태그를 가질 수 있다.

Dot Notation이 사용가능하다. e.g.

표현식 사용

JavaScript 표현식이 들어가야 하는 부분에 {} 를 넣고 사용한다.

표현식이 들어가야 하는 부분에 를 넣고 사용한다. 사용가능한 JavaScript 표현식 함수 호출식 e.g. {_renderFunc()} 삼항 연산자 e.g. { loading ? } 템플릿 리터럴 e.g. {hello ${name}}

표현식

어트리뷰트

key={value} 형태로 전달한다. 단, 문자열로 전달할 경우 '' 과 "" 사용 가능

형태로 전달한다. 단, 문자열로 전달할 경우 과 사용 가능 if , for , while 같은 제어는 함수를 이용해서 밖에서 사용해야한다.

, , 같은 제어는 함수를 이용해서 밖에서 사용해야한다. XSS(Cross-Site-Scripting)에 대한 기본 대응이 되어있다.

실제 HTML DOM 과는 다른 Attribute 를 가지고 있다. checked: 체크 상태 동적 할당 defaultChecked: 초기값 전달 or value: 내부값 동적 할당 defaultValue: 초기값 전달 DOM 객체에 쓰이는 innerHTML 는 dangerouslySetInnerHTML 을 이용한다. CSS 선택자로 쓰이는 class 는 className 으로 사용한다. className 은 class 를 동적할당할 수 있다. e.g. for 는 htmlFor 를 사용한다.

과는 다른 를 가지고 있다.

주의사항

JSX 선언의 결과물이 React Element 이기 때문에 JSX 코드 스코프 안에 import React from "react" 선언이 꼭 필요하다.

선언의 결과물이 이기 때문에 코드 스코프 안에 선언이 꼭 필요하다. JSX 를 통해 조작되는 건 실제 DOM 이 아닌 React 의 Virtual DOM 이다.

를 통해 조작되는 건 실제 이 아닌 의 이다. 태그와 컴포넌트 사이의 white space 는 자동으로 사라진다.

from http://geonlee.tistory.com/180 by ccl(A) rewrite - 2020-03-06 23:20:50