이번에는 지난번 [React] 기초편에 이어서.
[React] 기초편 React에서.
Component, props, React의 절차·구조의 3개를 주체로
상세히 소개해 주시기 바랍니다.
[React] 기초편의 링크는 아래부터 시작하십시오.↓↓↓
https://qiita.com/Yu-8chan/items/28ebf04f899639b0f536

구성 요소

어셈블리는 부품 또는 부품을 나타냅니다.
React에서 외관을 기능에 따라 구성 요소화하고 구성 요소를 조합하여 사이트의 외관을 만듭니다.

구성 요소 구성

언어 구성 요소를 만들기 위한 설정을 배우겠습니다.
①import React.
② React.계승된 구성 요소의 언어 클래스를 만듭니다.이 클래스는 구성 요소입니다.
③ 생성된 클래스에서 render 방법을 정의하고 return에 JSX를 기술합니다.
④ 어셈블리를 내보냅니다.
Language.js

import React from 'react'; ①
// クラス名がコンポーネントの名前になります
class Language extends React.Conponent { ②
  render() { ③
    return(
      ---JSX---
    );
  }
}

export default Language; ④

구성 요소 보기

어셈블리를 보려면 다음과 같이 하십시오.
① 언어 구성 요소를 내보냅니다.
Language.js

import React from 'react'; 
class Language extends React.Conponent { 
  render() { 
    return(
      ---JSX---
    );
  }
}
// Languageコンポーネントをexport
export default Language; 

② App Language 구성 요소.js내import.
③ JSX에 ＜ 어셈블리 이름/＞ 을 입력합니다.
Component의 특징으로 여러 번 호출할 수 있습니다.
App.js

import React from 'react'; 
// Languageコンポーネントをimport
import Language from './Language';
class App extends React.Conponent { 
  render() { 
    return(
      // JSX内に＜コンポーネント名 /＞と書く
      <Language />
      <Language />
      <Language /> // 何度でも呼び出せる
    );
  }
}

export default App; 

프로가 뭐예요?

App.js부터 일부 변경을 원하는 데이터를 언어 구성 요소에 전달함으로써 디스플레이를 부분적으로 변경할 수 있습니다.App.js에서 전달된 이 데이터를props(props)라고 합니다.

props의 교부 방법

props는 "props 이름 = 값"형식으로 구성 요소를 호출하는 곳에서 전달됩니다.
이번에name의props를 언어 구성 요소에 전달합니다.
App.js

import React from 'react'; 
import Language from './Language';
class App extends React.Conponent { 
  render() { 
    return(
      <Language 
        // 「props名 = 値」
        name = "HTML＆CSS"
      />
    );
  }
}

export default App; 

전달된props는this입니다.props를 통해 얻을 수 있습니다.
props의 내용을 보세요,this.props는 {props 이름: 값}이라는 대상입니다.
App.js

    return(
      <Language 
        // 「props名 = 値」
        name = "HTML＆CSS"
      />
    );

Language.js

    return(
      console.log(this.props);
      // 出力内容： {name: "HTML＆CSS"}
    );

props 가져오기

this.props를 쓰면 {props 이름: 값} 이 대상을 얻을 수 있습니다
"this.props.props 이름"을 통해props의 값을 얻을 수 있습니다.
다음 그림에서 가져온props를 사용하여 언어의 이름을 표시합니다.
Language.js

import React from 'react'; 
class App extends React.Conponent { 
  render() { 
    return(
      <p>この言語は{this.props.name}です</p>
      // 出力内容： この言語はHTML＆CSSです
    );
  }
}

export default App; 

한 번 더 노력하다

props를 사용함으로써 우리는 구성 요소가 각종 언어의 소개를 표시할 수 있다는 것을 발견했다.
하지만 100개 언어가 있다면 아래 그림처럼 쓰는 것은 힘들다.
App.js

  render() { 
    return(
      <Language name = "HTML＆CSS"/>
      <Language name = "PHP"/>
      <Language name = "Ruby"/>
      <Language name = "React"/>
                 .
                 .
    );
  }

저기 있다.맵 방법을 사용하면 구성 요소를 여러 번 반복해서 호출할 수 있습니다.

맵 방법

그럼 맵 방법으로 효과적으로 표시해 주세요.
다음 그림에서 보듯이 모든 언어 정보를 포함하는 언어 목록 그룹에 대해map 방법을 사용하면 모든 언어의 언어 구성 요소를 간단하게 표시할 수 있다
① 배열을 통해 각 객체를 검색합니다.
② 맵 방법을 사용하여 개체별로 표시합니다.
③name에 각 대상의 props(name)를 대입합니다.
App.js

  render() { 
    const languageList = [ ① // 言語ごとの情報を持つlanguageList配列
      {name: "HTML＆CSS"},
      {name: "PHP"},
      {name: "Ruby"},
      {name: "React"},
    ];
    return(
      <div>
        {languageList.map((languageName) => { ② // languageNameに各オブジェクトが挿入
          return(
            <Language 
              name = {languageName.name} ③ // nameに各オブジェクトのprops(name)を代入
            />
          );
        })};
      </div>
    );
  }

Language.js

  render() { 
    return(
      <p>この言語は{this.props.name}です</p>
      // 各言語の名前が表示されます
    );
  }

React 디스플레이 및 구조

여기서 우리가 표시하는 절차를 봅시다.

Language.언어 클래스 내보내기
　　　　　　　↓
App.언어 클래스 가져오기
　　　　　　　↓
index.js(App.js의 JSX를 HTML로 변환)
　　　　　　　↓
index.html(id명 루트에 index.js 내용을 삽입하고 index.html 내용은 브라우저에 표시)
Language.js

class Language extends React.Conponent { 
  render() { 
    return(
      ---JSX---
    );
  }
}
export default Language; // Languageコンポーネントをexport

App.js

import React from 'react'; 
import Language from './Language'; // Languageコンポーネントの内容をimport
class App extends React.Conponent { 
  render() { 
    return(
      <Language />
    );
  }
}

export default App; 

index.js

import React from './components/App'; 
ReactDom.render(<App />, document.getElementById('root'));
// <App />と書くことでApp.jsのJSXがHTMLに変換されます
// document.getElementById('root')で指定したid名の場所に挿入

index.html

<body>
  <div id="root"></div>
<body>

지금까지 React의 기초편이 끝났습니다.