[⚛React] React Element, React Component 그리고 JSX
[⚛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
댓글
댓글 쓰기