[리액트&리액트 네이티브 통합 교과서] JSX 랜더링

JSX란? 

 

리액트 컴포넌트 - 역할 : html을 브라우저 DOM에 랜더링하는 것(그래서 jsx가 html태그 지원)

import React from 'react';
import { render } from 'readct-dom';

render(
	(<p>Hello<p>, document.getElementById('root')
    // jsx를 1번째 인자로 받아 DOM노드에 랜더링하고, 2번째 인자로 전달됩니다.
);

 

render()는 jsx를 랜더링하고, 결과를 DOM 노드에 배치합니다.

 

 

 

[html 태그 규약]

<p>Hello<p>에서 p

jsx 마크업에서 html 태그 랜더링 시에는 태그 이름을 소문자로 사용한다고 예상합니다. (태그 이름이 대문자 시작이면, 실패합니다.) 그래서 html 태그 이름은 대소문자를 구분하고 html이 아닌 것은 대문자로 시작하는 방식을 사용하면, 마크업을 탐색하고 내장 html 요소를 다른 것과 비교하기 쉽게 해줍니다.

 

[UI 구조 설명]

jsx는 복잡한 UI구조를 설명하는 최고의 방법입니다. <section>, <nav> 같은 의미론적 요소를 이용하면, 구조를 추론하기 쉽고 특정 부분의 랜더링을 신경쓸 필요가 없습니다.

 

자신의 JSX 요소 생성

[html 캡슐화]

컴포넌트는 리액트의 기본 구현 블록이고, 생성 이유는 큰 구조를 캡슐화하기 위해서입니다.(복잡한 마크업 대신 -> 커스텀 태그) 모든 컴포넌트는 JSX 마크업을 랜더링하는 render() 메서드를 갖고 있습니다.

import React, { Component } from 'react';
import { render } from 'readct-dom';

class MyComponent extends Component {
    render() {
        return (
        	<section>
        		<h1>My Component</h1>
        		<p> ~~ <p>
        	</section>
         );
         }
}

render(
	<MyComponent />, document.getElementById('root')
    );

리액트의 Component 클래스를 확장한 MyComonent 클래스를 생성하고, render()을 호출해서 <MyComponent> 요소를 랜더링합니다. 그래서 react-dom으로부터 랜더링되면, 컴포넌트가 캡슐화한 html은 render() 메소드로부터 반환되어 대체하게 됩니다.

 

[중첩요소]

부모와 자식 관계를 가진 UI 구조를 설명하기 위해서 children 프로퍼티를 사용합니다.

import React from 'react';
import { render } from 'readct-dom';

import MySection from './MySection';
import MySection from './MyButton';

render(
	<MySection><MyButton> Button Text </MyButton></MySection>,
    document.getElementById('root')
);

Button Text는 MyButton의 자식이자 MySection의 자식이고, 해당 내용이 MySection으로 투명학 전달이 되어서 MySection에서 해당 텍스트가 존재하는지 확인 코드를 작성하지 않아도 됩니다.

import React, { Component } from 'react';

exort default class MyButton extends Component {
	render() {
    	return <button>{this.props.children}</button>;
    }
}

{this.props.children} 값을 가져오고, 의미있는 마크업을 감쌉니다.