02. 리액트 동작 원리

02-1 가상 DOM 이해하기

리액트 프레임워크를 구성하는 3요소 – 가상 DOM(Virtual DOM), JSX(JavaScript XML), 컴포넌트(Component)

React.StrictMode – 코드가 잘못되었는지 판단하여 오류 메세지를 보여주는 컴포넌트

reportWebVitals – 앱의 성능을 측정

let element = document.createElement(localName [, options]);

let p = document.createElement("p");    // <p>요소 생성
document.body.appendChild(p);    // 렌더링

import React from 'react'
import ReactDOM from 'react-dom/clinet'

const pVirtualDOM = React.createElement('p', null, 'Hello world!');
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(pVirtualDOM);

02-2 JSX 구문 이해하기

React.createElement 호출의 복잡성 문제를 해결하기 위하여 JSX사용.

자바스크립트 문법에 새로운 문법을 추가한 언어 확장(language extension).

JavaScript + XML

import ReactDOM from 'react-dom/client'

const rootVirtualDOM = (
  <ul>
    <li>
      <a href="http://www.google.com" target="_blank">
        <p>go to Google</p>
      </a>
    </li>
  </ul>
)

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(rootVirtualDOM)

중괄호를 이용하여 자바스크립트 코드를 감싸는 형태의 문법.

return 없이 값을 반환해야 함. => 표현식(expression)

실행문(execution statement)은 넣을 수 없음.

<p>
  {/* string must be wrapped by Text */}
</p>

배열 사용 가능. 단, 부모 요소 없이는 사용 불가.

02-3 컴포넌트 이해하기

컴포넌트(Component) – 화면UI를 처리하는 클래스

리액트 훅(react hooks) – 단순한 함수 형태로 컴포넌트를 구현하는 새로운 메커니즘

import {Component} from 'react'

export type ClassComponentProps = {
  href: string
  text: string
}
export default class ClassComponent extends Component<ClassComponentProps> {
  render() {
    const {href, text} = this.props
    return (
      <li>
        <a href={href}>
          <p>{text}</p>
        </a>
      </li>
    )
  }
}

export default function App() {
  return <h1>function component</h1>
}

import type {FC} from 'react'

export type ArrowComponentProps = {
  href: string
  text: string
}
const ArrowComponent: FC<ArrowComponentProps> = props => {
  const {href, text} = props // 속성을 this.props가 아니라 함수 매개변수로 얻을 수 있다.
  return (
    <li>
      <a href={href}>
        <p>{text}</p>
      </a>
    </li>
  )
}
export default ArrowComponent

import type {FC} from 'react' // FC는 컴파일되면 사라지는 정보이다.
import {Component} from 'react'

02-4 key와 children 속성 이해하기

export default function App() {
  const texts = [<p key="1">hello</p>, < key="2">world</p>]
  return <div>{texts}</div>
}

export default function App() {
  const texts = ['hello', 'world'].map((text, index) =>
    <p key={index}>{text}</p>)
  return <div>{texts}</div>
}

export default function App() {
  const texts = ['hello', 'world'].map((text, index) =>
    <p key={index} children={texts}/>)
  return <div children={texts} />
}
  

import type {FC, ReactNode} from 'react'

export type PProps = {
  children?: ReactNode
}

const P: FC<PProps> = props => {
  const {children} = props
  return <p children={children} />
}

PropsWithChildren

import type {FC, ReactNode} from 'react'

export type PProps = {
  children?: ReactNode | undefined
}
const P: FC<PProps> = props => {
  return <p {...props} />
}
export default P

02-5 이벤트 속성 이해하기

이벤트 – 사용자 행위가 일어날 때

Event

• type : 이벤트의 이름. 대소문자 구분X
• isTrusted : 이벤트가 웹브라우저에서 발생했으면 true, 프로그래밍으로 발생했으면 false
• target : 이벤트가 처음 발생한 HTML 요소
• currentTarget : 이벤트의 현재 대상, 이벤트 버블링 중에서 이벤트가 현재 위치한 객체
• bubbles : 이벤트가 DOM을 타고 버블링될지 여부

DOM_객체.addEventListener(이벤트_이름: string, 콜백_함수: (e: Event) => void)

on-이벤트명 메서드 – 가장 마지막에 설정된 콜백 함수를 호출한다.