3.構成部品

リアクターを使用してアプリケーションインタフェースを設計する場合、ユーザーが表示する要素は複数のコンポーネントから構成されます.コンポーネントの機能はテンプレートだけではありません.データを提供するときにUIを作成するだけでなく、ライフサイクルAPI処理コンポーネントを使用して画面に表示、消去、または変更が発生したときの指定されたタスクを処理し、任意の方法で特殊な機能を追加することもできます.

👀라이프사이클API?
**컴포넌트가 브라우저 상에서 나타나거나, 업데이트되거나, 사라지는 과정에서 어떠한 작업을 하고 싶을 때
LifeCycleAPI를 사용한다. 자세한 내용은 이 뒤로 포스팅하는 과정에서 기록할 예정이다😃

3-1. クラス構成部品

構成部品を宣言する方法は2つあります.1つは関数要素で、もう1つはクラス要素です.クラス構成部品は以下のようになります.

import React, { Component } from 'react';

class App extends Components {
	render() {
    	const name = 'react';
        return <div className="react">{name}</div>;
    }
}

export default App;

クラス構成部品にはrender関数が必要であり、表示する必要があるJSXを返さなければなりません.

👀클래스형 컴포넌트?
**클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 
있다는 장점이 있다.

👀함수 컴포넌트?
**함수 컴포넌트는 클래스형 컴포넌트보다 가볍고 선언하기가 편하다는 장점이 있지만, state와 라이프사이클 API
사용이 불가능 하다는 단점이 있다. 하지만 이 단점은 리액트 버전 업데이트 이후 Hooks라는 기능이 도입되면서
해결되었다. 클래스형 컴포넌트와 완전이 똑같은것은 아디지만 조금 다른 방식으로 비슷하게 작업할 수 있다.

反応式マニュアルでは、新しい構成部品を作成するときに関数構成部品とHooksを使用することを推奨していますが、クラス構成部品が消えるわけではありませんので、クラス構成部品の機能も理解してください.

1.モジュールのエクスポートと読み込み

1-1. エクスポートモジュール(export)

export default MyComponent;

上記のコードは、他のファイルからこのファイルをインポートするときにMyComponentクラスを読み込むように設定されます.

1-2. モジュールの読み込み(import)

import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent />;
};

export default App;

3-2. props

propsはpropertiesを構成部品属性の設定に簡略化する際に使用される要素である.props値は、構成部品を読み込んで使用する親構成部品で設定できます.クラス構成部品でpropsを使用する場合はrender関数でthisを使用します.propsを検索すればいいです.

import React, { Component } from 'react';
import PropsTypes from 'prop-types';

class MyComponent extends Component {
	render() {
    	const { name, children } = this.props //비구조화 할당
        return (
        	<div>
            	안녕하세요 제 이름은 {name}입니다.
                children 값은 {children}입니다.
            </div>
        )
    }
}

MyComponent.defaultProps = {
	//name props에 값이 없을 때 설정하는 기본 값
	name: '기본 이름'
};

MyComponent.propTypes = {
	//컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용하는 방법, 사용시 위와같이
    //prop-types를 import해놔야 한다
	name: PropTypes.string 
}

3-3. state

反応中、stateは素子内部で変化可能な値を表す.propsは、構成部品の使用中に親構成部品によって設定された値であり、構成部品自体は読み取り専用としてのみ使用できます.propsを変更するには、親コンポーネントで変更する必要があります.
反応には2つの状態がある.一つはクラス要素のstateであり、もう一つは関数要素がusStateという関数で使用されるstateである.

1.ジェネリック構成部品の状態

import React, { Component } from 'react';

class Counter extends Component {
	constructor(props) {
    	super(props);
        //state의 초기값 설정
        this.state = {
        	number: 0
        };
    }
    render() {
    	const { number } = this.state;
        return (
        	<div>
            	<h1>{number}</h1>
                <button
                  onClick={() => {
                  	//this.setState를 사용하여 state에 새로운 값을 넣을 수 있다.
                      this.setState({ number: number + 1 });
                  }}
                >
                	+1
                </button>
            </div>
        )
    }
}

export default Counter;

クラス構成部品からコンストラクション関数を作成する場合は、現在のクラス構成部品が継承するリアクターのコンポーネントクラスが持つコンストラクション関数を呼び出すにはsuper(props)を呼び出す必要があります.また、構成部品のステータスはオブジェクトタイプでなければなりません.そしてこれ.setState関数は、パラメータとして渡されるオブジェクトの値のみを置き換えます.

👀state를 constructor에서 꺼내기?

import React, { Component } from 'react';

class Counter extends Component {
	state = {
    	number: 0,
    }
    render() {
    	const { number } = this.state;
        return (
        	<div>
            	<h1>{number}</h1>
                <button
                  onClick={() => {
                  	//this.setState를 사용하여 state에 새로운 값을 넣을 수 있다.
                      this.setState({ number: number + 1 });
                  }}
                >
                	+1
                </button>
            </div>
        )
    }
}

export default Counter;

前述したように、コンストラクション関数メソッドを宣言することなくstate初期値を設定できます.次にsetStateを使用して値を更新し、特定の操作が必要な場合にsetStateの2番目のパラメータを使用してコールバック関数を追加できます.

import React, { Component } from 'react';

class Counter extends Component {
	state = {
    	number: 0,
    }
    render() {
    	const { number } = this.state;
        return (
        	<div>
            	<h1>{number}</h1>
                <button
                  onClick={() => {
                      this.setState(
                      { number: number + 1 }, 
                      () => {console.log('setState가 호출되었습니다.');}
                      );
                  }}
                >
                	+1
                </button>
            </div>
        )
    }
}

export default Counter;

2.関数構成部品のユーザー状態

import React, { useState } from 'react';

const Say = () => {
	const [message, setMessage] = useState('');
    const onClickEnter = () => setMessage('안녕하세요');
    const onClickLeave = () => setMessage('안녕히 가세요');
    
    return (
    	<div>
        	<button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1>{message}</h1>
        </div>
    )
};

export default Say;

userState関数のパラメータには、ステータスの初期値が含まれます.クラス構成部品ではstateの初期値はオブジェクト形式であるべきであり、usStateではオブジェクトではないことを考慮する必要はありません.値の形式は、数字、文字、オブジェクト、配列と同じように自由です.また、配列の最初の要素は現在の状態であり、2番目の要素は状態を変える関数である.この関数をsetter関数と呼びます.名前は、上記の非構造化割当によって自由に決定できます.

3-4. 注意事項と整理

どの構成部品を使用しても、state値を変更する必要がある場合は、setStateまたはuseStateで渡されるsetter関数を使用する必要があります.
propsとstateは、構成部品で使用またはレンダリングするデータが含まれているため、似ているように見えますが、それらの役割は非常に異なります.すなわち,propsは親素子によって設定され,stateは素子自体が持つ値によって素子内部で値なしにデートを行うことができる.
これははんのうぎじゅつの文章を読む要約です.😊