🧑‍💻 React study 3.

Chapter 3

Component, props

3.1クラス構成部品
構成部品を宣言する方法は2つあります.

1) 함수 컴포넌트 

2) 클래스형 컴포넌트

1)クラス構成部品

クラスエレメントと関数エレメントの違いは、クラスエレメントがステータス機能とライフサイクル機能を使用してもよいし、任意の方法を定義してもよいことです.

ES 6のクラス構文

ES 6以前JSにはクラスがありませんでした.コンセプト自体はありますが、classの代わりに原型の文法を使いました.

function Dog(name) {
  this.name = name;
}
Dog.prototype.say = function() {
  console.log(this.name + ': 멍멍');
}
var dog = new Dog('검둥이');
dog.say(); // 검둥이: 멍멍
// ES6 문법부터 class를 사용 할 수있게 됬다.
class Dog {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(this.name + ':멍멍');
  }
}
const dog = new Dog('흰둥이');
dog.say(); // 흰둥이: 멍멍

クラス構成部品にはrender関数が必要であり、JSXに戻る必要があります.
3.2構成部品の作成

3.2.1モジュールのインポートとエクスポート
1) import

2) export


3.3 props

1) props 는 컴포넌트 속성을 설정할 때 사용하는 요소이다.

2) props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 사용가능.

3.3.1 JSXでpropsをレンダリングする
props宣言



3.3.2 propsデフォルト:defaultProps
propsをデフォルトに設定する

3.3.3タグ間の内容を表示するサブアイテム
反応素子を使用すると、素子ラベル間の内容が表示されます.


3.3.4非構造化賦値構文によるprops内部値の抽出

3.3.5 proptypeによるpropsの検証
構成部品の必須propsまたはpropsのタイプを指定する場合はproptypeを使用します.構成部品のprotTypeを指定する方法はdefaultPropの設定と同様です.



コンポーネントで設定したpropsがproptypeで指定したシェイプと一致しない場合、開発者ツールのconsoleタブに警告が表示されます.
nameの値をstringに変更するとエラーが解消されます.
3.3.3.5.1 isRequiredを使用して必要なProTypeを設定する
proptypeが指定されていない場合のフロート警告メッセージ


3.3.6クラス構成部品でのpropsの使用
クラス構成部品でpropsを使用する場合はrender関数でthisを使用します.propsを検索すればいいです.
第一の方法.

2つ目の方法.

3.4 state
反応中、stateは素子内部で変化可能な値を表す.
propsは、構成部品の使用中に親構成部品が設定された値であり、構成部品自体は読み取り専用のみです.
反応器には2つの状態がある.

1) 클래스형 컴포넌트가 가지고 있는 state

2) 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state

3.4.1クラス構成部品の状態

構成部品にstateを設定すると、コンストラクション関数メソッドが設定されます.

class Counter extends Component {
  constructor(props) {
    super(props);
    //state의 초기값 설정
    this.state = {
      number: 0,
    };
  }

構成部品の作成方法.クラス構成部品にコンストラクション関数を作成する場合は、super(props)を呼び出す必要があります.この関数を呼び出すと、現在のクラスメタが継承する反応器のコンポーネントクラスが持つ構造関数が呼び出されます.

render() {
    const { number } = this.state; // state를 조회할 때는 this.state로 조회.
    return (
      <div>
        <h1>{number}</h1>
        <button
          // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다.
          onClick={() => {
            // this.setState를 사용하여 state에 새로운 값을 넣을 수 있다.
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }

3.4.1.1 stateオブジェクトに複数の値が含まれている場合

3.4.1.2コンストラクション関数からstateをポップアップする

3.4.1.3 this.オブジェクトではなくsetStateに関数パラメータを渡す
this.setStateを使用してステータス値を更新すると、ステータスは非同期で更新されます.onClickで設定した関数の内部にthisがある場合.setStateを2回呼び出すと?

onClick={() => {
  this.setState({ number: number + 1 });
  this.setState({ number: this.state.number + 1 });
}}

this.setStateを使用しても、state値はすぐには変更されません.
解決策はこれです.setStateを使用する場合、関数はオブジェクトではなくパラメータとして使用されます.
this.関数をsetStateのパラメータとして挿入すると、次の形式で作成されます.

this.setState((prevState, props) => {
  return {
    // 업데이트 하고 싶은 내용
  }
})

ここでprevStateは既存の状態を表し,propsは現在所有しているpropsを表す.

3.4.1.4 this.setState完了後に特定のタスクを実行
setStateを使用して値を更新し、2番目のパラメータを使用してコールバック関数を登録してタスクを処理します.

        <button
          onClick={() => {
            this.setState(
              {
                number: number + 1,
              },
              () => {
                console.log('방금 setState가 호출 되었습니다.');
                console.log(this.state);
              }
            );
          }}
        >
          +1
        </button>

3.4.2関数構成部品でのusStateの使用
関数構成部品はstateを使用できません.ただし、userStateという関数を使用して、関数要素にstateを使用することもできます.
3.4.2.1非構造化アレイの割り当て
配列非構造化割り当ては、オブジェクトの非構造化割り当てと似ています.
すなわち,配列中の値の構文を容易に抽出できる.

const array = [1,2];
const one = array[0];
const two = array[1];
// 배열 비구조화 할당 사용
const array = [1,2];
const [one, two] = array;

3.4.2.2 usStateの使用


setState関数のパラメータには、状態の初期値が含まれます.
呼び出し関数は配列を返します.
配列の最初の要素は現在の状態であり、2番目の要素は状態を変える関数です.
3.4.2.3 1つの構成部品でのusStateの複数回使用

整理する.

1) props 와 state는 둘 다 컴포넌트에서 사용하거나 렌더링 할 데이터를 담고 있지만 역할은 다르다.

2) props는 부모 컴포넌트가 설정, state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트 한다.