反応基礎クラス2週目-1

22年4月3日
[スパルタコードクラブ]反応ベースクラス-2週目

◇ライフサイクル

ダミードーム

DOM:html単位ごとにオブジェクトとして扱われるモデル
サブノードを持つツリー構造.

仮想DOM:メモリ内で回転する偽DOM

仮想DOMの動作:
既存のDOMとある行動後に新しく描かれたDOM(仮想ドームに登ったと形容)を比較し、本当に変わった部分だけを取り替えます!

DOMの再描画:

初回登録時は

デック変更時

ライフサイクル:エレメントがレンダリングの準備をしている時点から、ページから消えるまで(正式な書類)

要素が作成され、→修正(更新)、および→消去される.

作成

:第1ステップマウント構成部品

修正:特定の状況で更新

支柱交換時

州交換時

親コンポーネントの更新時、

が強制的に更新された場合(forceUpdate()によって構成部品を強制的に更新できます).

削除

:ステップ

でページを移動したり、ユーザの動作(削除ボタンをクリックするなど)によって素子を画面から消去したりする.

◇クラスコンポーネントに表示されるライフサイクル

import React from "react";

// 클래스형 컴포넌트는 이렇게 생겼습니다!
class LifecycleEx extends React.Component {

// 생성자 함수
  constructor(props) {
    super(props);
    
    this.state = {
      cat_name: '나비',
    };

    console.log('in constructor!'); // class LifecycleEx 생성시 인쇄
  }

  changeCatName = () => {
    //state 업데이트 하는 방법
      this.setState({cat_name: '바둑이'});

      console.log('고양이 이름을 바꾼다!');
  }

  // 첫번째 렌더링을 마친 후에만 딱 한 번 실행
  // 보통은 이 안에서 ajax 요청, 이벤트 등록, 함수 호출 등 작업을 처리
  // 이미 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도 됨
  componentDidMount(){
    console.log('in componentDidMount!');
  }
  
  // 리렌더링을 완료한 후 실행되는 함수
  // prevProps, prevState : 업데이트가 되기 전의 props, state
  // 이미 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도 됨
  componentDidUpdate(prevProps, prevState){
      console.log(prevProps, prevState);
      console.log('in componentDidUpdate!');
  }

  // componenet 가 없어질 때 실행되는 함수
  componentWillUnmount(){
      console.log('in componentWillUnmount!');
  }

  // 랜더 함수 안에 리액트 엘리먼트를 넣어준다.
  // 컴포넌트의 모양을 정의함
  // render 에서는 state나, props를 건드려 데이터를 수정하려고 하면 안됨.
  render() {

    console.log('in render!');

    return (
      <div>
          {/* render 안에서 컴포넌트의 데이터 state를 참조할 수 있습니다. */}
        <h1>제 고양이 이름은 {this.state.cat_name}입니다.</h1>
        {/* 버튼 클릭시 고양이 이름이 바둑이로 바뀜 */}
        <button onClick={this.changeCatName}>고양이 이름 바꾸기</button> 
      </div>
    );
  }
}

export default LifecycleEx;

◎ Component

コンポーネント:Reactがレゴの場合、コンポーネントはブロックのような友达です.

State:コンポーネントが所有するデータ
->コンポーネントで変更可能

Props:親コンポーネント(親コンポーネント)から受信したデータ
->このコンポーネントは変更不可

Class Component

import React from 'react';
import logo from './logo.svg';
import './App.css';
// BucketList 컴포넌트를 import 해옵니다.
import BucketList from './BucketList';

class App extends React.Component {

  constructor(props){
    super(props);
    // App 컴포넌트의 state를 정의해줍니다.
    this.state = {
      list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
    };
  }

  // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() {
      // this 키워드를 통해 state에 접근할 수 있어요.
    console.log(this.state); // {list: ['영화관 가기', '매일 책읽기', '수영 배우기']};
      
    return (
      <div className="App">
        <h1>내 버킷리스트</h1>
        {/* 컴포넌트를 넣어줍니다. */}
        <BucketList list={this.state.list}/>
      </div>
    );
  }
}

export default App;

--------------------------------------------------

// 리액트 패키지를 불러옵니다.
import React from 'react'; 


// () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다.
// js 함수가 값을 받아오는 것과 똑같이 받음.
const BucketList = (props) => {

    const my_lists = props.list;
    console.log(my_lists); // ['영화관 가기', '매일 책읽기', '수영 배우기']

    return (
        <div>
            {  my_lists.map((list, index) => {
                    console.log(list); // '영화관 가기', '매일 책읽기', '수영 배우기' 하나씩 나옴
                    return (<div key={index}>{list}</div>);
                })
            }
        </div>
    );
}

// 우리가 만든 함수형 컴포넌트를 export 해줍니다.
// export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있어요.
export default BucketList;

関数型構成部品//応答式マニュアルでより多くの関数型構成部品を推奨
->ライフサイクル関数

の代わりに応答ホストを使用する

  
import React from 'react';
import logo from './logo.svg';
import './App.css';
// BucketList 컴포넌트를 import 해옵니다.
import BucketList from './BucketList';

function App() {

  return (
    <div className="App">
      <h1>내 버킷리스트</h1>
      {/* 컴포넌트를 넣어줍니다. */}
      <BucketList/>
    </div>
  );
}

export default App;

------------------------------------------------------------

// 리액트 패키지를 불러옵니다.
import React from 'react'; 

// () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다.
// js 함수가 값을 받아오는 것과 똑같이 받아오네요.
const BucketList = (props) => {
  
  	console.log(props); // {list: ['영화관 가기', '매일 책읽기', '수영 배우기']};

    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
    return (
        <div>
            버킷 리스트
        </div>
    );
}

// 우리가 만든 함수형 컴포넌트를 export 해줍니다.
// export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있어요.
export default BucketList;