React 1일차

리액트 특징

• 선언형 프로그래밍
• 컴포넌트 시스템
• 크로스 플랫폼

---

noscript

리액트는 js로 html을 생성하기 때문에 JavaScript가 활성화 상태여야 함
비활성화이면 noscript에 작성한 내용이 화면에 나옴

<!-- html body 태그 안에 작성 -->
<noscript>이 앱을 사용하려면 자바스크립트 활성화가 필요합니다.</noscript>

개발자 도구에서 ctrl+shift+p

• js 비활성화
  

• js 활성화
  

---

js로 동적 렌더링하기

HTML

<div id="app"></div>

JS

// 데이터 분리 후 선언
const data = {
  heading: 'React',
  paragraph: '리액트 쉽지 않네'
}


// 문서에서 해당 요소 찾기
const appElement = document.querySelector('#app');


// 동적 렌더링 함수
function render() {
  const h1Element = document.createElement('h1');
  const pElement = document.createElement('p');

  h1Element.textContent = data.heading;
  pElement.textContent = data.paragraph;

  appElement.append(h1Element, pElement);
}
render();

결과

---

createElement( )

JS와 React에서 createElement는 다름

• js
  document.createElement()는 DOM에서 새로운 HTML 요소를 동적으로 생성하는 메서드
  
  
• React
  React.createElement()는 React 엘리먼트를 생성하는 함수로 가상 DOM 요소를 만들고 이를 실제 DOM에 렌더링하는데 사용
  
  

리액트에서 createElement

import React from 'https://esm.sh/react';

console.log(React.createElement());

js 함수로 만들기

function createElement(type, props, ...children) {
  return (
    {
      $$typeof: Symbol('song.element'),
      type: undefined,
      props: { ...props, children }
    }
  )
}

사용해보기

const test = createElement(
  'div',
  { id: 'userName' },
  'my name is song.'
)

console.log(test);

---

React rendering

HTML

<div id="root"></div>

JS

import React from 'https://esm.sh/react';
import ReactDOM from 'https://esm.sh/react-dom';

const test1 = React.createElement(
  'p',
  {},
  '리액트 쉽지 않네...'
)

const test2 = React.createElement(
  'div',
  { class: 'wrapper' },
  'React',
  test1
)

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(test2);

결과

---

React rendering 실습

HTML

<div id="root"></div>
<button type="button" class="bye_btn">잘가시오~</button>

JS

import React from 'https://esm.sh/react';
import ReactDOM from 'https://esm.sh/react-dom';

const minji = React.createElement('li', { class: 'member' }, '민지')
const hanni = React.createElement('li', { class: 'member' }, '하니')
const danielle = React.createElement('li', { class: 'member' }, '다니엘')
const haerin = React.createElement('li', { class: 'member' }, '해린')
const hyein = React.createElement('li', { class: 'member' }, '혜인')

const newjeans = React.createElement(
  'ul',
  { class: 'newjeans' },
  minji,
  hanni,
  danielle,
  haerin,
  hyein
)

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(newjeans);

document.querySelector('.bye_btn').addEventListener('click', () => {
  // 해당 루트 아래에 있는 모든 React 컴포넌트들이 정리 작업을 수행하고 제거
  root.unmount();
})

결과

---

JSX

• JavaScript Xml
• 비표준 기술이라 브라우저가 해석 못 함 (컴파일러로 해석하는 과정 필요. ex_babel, TS, Vite)
• 파일 확장자명을 .jsx로 바꿔야 동작

<div id="root"></div>
<button type="button" class="bye_btn">잘가시오~</button>

import React from 'https://esm.sh/react';
import ReactDOM from 'https://esm.sh/react-dom';

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(
  <div id="app">
    <h1>안녕하시오!</h1>
    <p>오늘도 무사히 지나갔구려~</p>
  </div>
)

• .js
  
• .jsx