[react]-第9課

必要な技術仕様

カスタム要素

class EuidInput extends HTMLElement {
  constructor() {
    // 요소가 생성될 때 호출된다.
    // HTMLElement를 확장하여 super()가 반드시 필요!
    super();
    
    // 섀도우 돔 트리를 연결하고 이에 대한 참조 반환
    // mode: open은 루트 외부의 자바스크립트에서 접근을 가능하게 해줌
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    // 요소가 문서에 추가될 때 이 메서드 호출
    // 요소가 반복적으로 추가/제거될 경우 수차례 호출 
  }

  disconnectedCallback() {
    // 요소가 문서에서 제거될 때 브라우저는 이 메소드를 호출
    // 요소가 반복적으로 추가/제거될 경우 수차례 호출
  }

  // static 메서드 
  static get observedAttributes() {
    return [
      /* 변경을 관찰할 속성 이름 배열 */
    ];
  }

  // React와 같이 속성이 변경됨에 따라 callback으로 관리
  attributeChangedCallback(name, oldValue, newValue) {
    // observedAttributes()에 등록된 속성 중 값이 변경되면 호출
  }

  adoptedCallback() {
    // 요소가 새 문서로 이동되면 호출
    // document.adoptNode에서 발생하며, 거의 사용되지 않는다.
  }

  // 사용자가 정의한 속성 및 메서드를 작성할 수 있습니다.
  // ...
}

customElements.define('euid-input', EuidInput);

<euid-input />

const euidInputNode = document.createElement('euid-input');

Webコンポーネントの動的インストール

<script>
  // [미션]
  // 위에 HTML로 작성된 euid-counter 커스텀 요소를 프로그래밍 방식으로 생성한 후,
  // .demo 요소 내부에 마운트 하여 컴포넌트를 렌더링 합니다.

  // 컴포넌트가 존재한다면? 컴포넌트를 렌더링 하자.
  let componentName = 'euid-counter';
  customElements.whenDefined(componentName).then(() => {
    const createdCustomElement = document.createElement(componentName);
    createdCustomElement.setAttribute('min', 1);
    createdCustomElement.setAttribute('count', 3);
    createdCustomElement.setAttribute('max', 10);
    document.querySelector('.demo:last-of-type').append(createdCustomElement);
  });
</script>

// [미션]
// 프로그래밍 방식으로 업데이트 된 속성을 감지하여
// 각 속성 값을 컴포넌트의 props에 업데이트 합니다.
// 속성 관찰
static get observedAttributes() {
  return ['min', 'max', 'step', 'count'];
}

// 속성 관찰 후 이것들을 props에 값을 넣어줌
attributeChangedCallback(name, oldValue, newValue) {
  this.props[name] = newValue;
}

コンテナ構成部品(ステータスあり)

コンテナ構成部品とは?

Reactの主なタスクは、アプリケーションのステータスを取得し、DOMノードに変換することです。

prop vs. state

実際の操作

npx create-react-app .

// static method (sync)
import reportWebVitals from './reportWebVitals';

import('./reportWebVitals')
  .then(({ default: reportWebVitals }) => reportWebVitals(console.log))
  .catch(({ message }) => console.error(message));

// React 앱은 Node.js 환경에서 컴파일 되므로
// process.env를 사용할 수 있다.
const { NODE_ENV: devOrProdMode } = process.env;

// 빌드 할 때만, reportWebvitals 모듈 동적 호출
if (devOrProdMode.includes('production')) {
  // dynamic import (async)
  // reportWebVitals();
  import('./reportWebVitals')
    .then(({ default: reportWebVitals }) => reportWebVitals(console.log))
    .catch(({ message }) => console.error(message));
}

ヘッドの作成

import React from 'react';
import { ReactComponent as ReactLogo } from '../../assets/logo.svg';

// stateful component
export class AppHeader extends React.Component {
  constructor(props) {
    super(props);

    // 컴포넌트 상태 설정
    this.state = {
      brand: {
        label: 'React',
        className: 'App-logo',
      },
      description: '',
      learnLink: {
        className: 'App-link',
        href: 'https://reactjs.org',
        text: 'Learn React',
        isExternal: true,
      },
    };
  }

  render() {
    const {
      brand: { label, className },
      learnLink,
    } = this.state;
    return (
      <header className='App-header'>
        <ReactLogo title={label} className={className} />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className={learnLink.className}
          href={learnLink.href}
          target={learnLink.isExternal && '_blank'}
          rel={learnLink.isExternal && 'noopener noreferrer'}
        >
          {learnLink.text}
        </a>
      </header>
    );
  }
}

export class AppHeader extends React.Component {
  ...
  // 이렇게 되면 constructor 생략 가능!
  // 컴포넌트 상태 설정
  this.state = {
    brand: {
      label: 'React',
      className: 'App-logo',
    },
    description: '',
    learnLink: {
      className: 'App-link',
      href: 'https://reactjs.org',
      text: 'Learn React',
      isExternal: true,
    },
  };

...

// stateful component
export class AppHeader extends React.Component {
 
  // 컴포넌트 상태 설정
  this.state = {
    ...
    description: 'Edit <code>src/App.js</code> and save to reload.',
  };

  render() {
    const {
      brand: { label, className },
      description,
      learnLink,
    } = this.state;
    return (
      ...
        <p>{description}</p>
      ...
    );
...

  getDescription() {
    return ['Edit', ' ', <code key='appEntryFile'>src/App.js</code>, ' ', 'and save to reload.'];
  }

クラス構成部品ステータスの更新

クラス構成部品のライフサイクル

一般的なライフサイクル