리액트를 쓰는 이유가 무엇인가를 알아보자.
// 기본 사용법
React.createElement(
type // 태그 이름 문자열 | 리액트 컴포넌트 | React.fragment
[props] // 리액트 컴포넌트에 넣어주는 데이터 객체
[...children] // 자식으로 넣어주는 요소들
)
- 태그 이름 문자열 type
// 1. 태그 이름 문자열 type
//<h1>type이 "태그 이름 문자열" 입니다.</h1>
ReactDOM.render(
React.createElement('h1', null,`type이 "태그 이름 문자열" 입니다.`),
document.querySelector('#root')
);
결과
<div id="root"> <h1>type이 "태그 이름 문자열" 입니다.</h1> </div>
type이 "태그 이름 문자열" 입니다.
- 리액트 컴포넌트 type
// 2. 리액트 컴포넌트 type
//<h1>type이 "React 컴포넌트" 입니다.</h1>
const Component = () => {
return React.createElement(
'p',
null,
`type이 "React 컴포넌트" 입니다.`
)
}
// <Component></Component>
// => <p>type이 "React 컴포넌트" 입니다.
ReactDOM.render(
React.createElement(Component, null, null),
document.querySelector('#root')
)
결과
<div id="root"><p>type이 "React 컴포넌트" 입니다.</p></div>
type이 "React 컴포넌트" 입니다.
- React.Fragment
// 3. React.Fragment
// type이 "React Fragment" 입니다.
ReactDOM.render(
Readt.createElement(
React.Fragment,
nul,
'type이 "React Fragment" 입니다.'
),
document.querySelector('#root')
);
결과
<div id="root">type이 "React Fragment" 입니다.</div>
type이 "React Fragment" 입니다.
- 복잡한 리액트 엘리먼트 모임
(React.createElement()의 한계), JSX의 필요성.
// 4. 복잡한 리액트 엘리먼트 모임
//
// <div>
// <div>
// <h1>주제</h1>
// <ul>
// <li>React</li>
// <li>Vue</li>
// </ul>
// </div>
// </div>
ReactDOM.render(
React.createElement(
"div",
null,
React.createElement(
"div",
null,
React.createElement("h1", null, "주제"),
React.createElement("ul", null, React.createElement('li', null, "React"), React.createElement('li', null, "Vue")
)
)
),
document.querySelector('#root')
)
결과
<div> <div> <h1>주제</h1> <ul> <li>React</li> <li>Vue</li> </ul> </div> </div>
주제
- React
- Vue
구분선
const component = {
message: 'init',
count: 0,
render() {
return `<p>${this.message} : ${this.count}</p>`;
}
}
function render(rootElement, component) {
rootElement.innerHTML = component.render();
}
// 초기화(실행? 표시?)
render(document.querySelector('#root'), component);
document.querySelector('#btn_plus').addEventListener('click', () => {
component.message = 'update';
component.count = component.count + 1;
//실행
render(document.querySelector('#root'), component);
})
// 상태값이 변할때마다 render를 계속 실행시켜줘야함
// 이것이 자바스크립트의 문법
<!-- HTML Element -->
<img src="이미지 주소"/>
<button class="클래스 이름">버튼<button>
<!-- 내가 만든 Component -->
<내가지은이름1 name="zaelook" />
<내가지은이름2 prop={false}>내용</내가지은이름2>
내가 정의하는 ??
State Change -> Compute Diff -> Re-render
React Client Side Rendering
React Server Side Rendering
CSR
SSR
// 기초 핵심 모듈 2개
// 1. 리액트 컴포넌트 => HTMLElement 연결하기
import ReactDOM from 'react-dom';
// 2. 리액트 컴포넌트 만들기
import React from 'react';
import는 ES6 모듈 방식이죠
보통 node.js 에서 모듈을 가져다 쓰려고 하면
require를 이용하게 되는데요
우리가 리액트를 사용하면서 import를 사용할 수 있는 이유는
나중에 webpack을 통해서 변경이 되기 때문에
import 구문을 사용할 수 있게 됩니다.
보통 js에서 라이브러리라고 하면 스크립트를 추가해서
추가된 스크립트의 전역 객체를 끌어다 사용하는 경우가 많은데
import 구문으로 모듈화시켜서 가져오고 사용할 수 있는것은
그냥 자바스크립트로만 사용할 수 없기 때문에
다른 webpack이나 번들러를 사용하게 된다