프로그래밍 공부 일기

2020년 6월 21일 Progate Lv.140
ReactⅡ

구성요소

컴포넌트는 부품이나 파츠라는 의미. React에서는 외형을 기능별로 컴포넌트화하여 컴포넌트를 조합하여 웹사이트의 외형을 만든다. 이번에는 컴포넌트에 Language라는 이름을 붙인다.

구성 요소 구성

Language.js

import React from 'react'; //Reactのインポート
//React.Componentを継承するLanguageクラスを作成（このクラスがコンポーネント）
class Language extends React.Component{ 
  render(){  //renderメソッドを定義
    return(
      //JSX
    );
  }
}

구성 요소 표시

Language 컴퍼넌트를 App.js에 호출해 표시시키는 것으로, Language 컴퍼넌트가 브라우저에 표시된다. JSX내에 <コンポーネント名 /> 라고 쓰는 것으로 컴퍼넌트를 표시할 수 있다. 컴퍼넌트는 몇번이라도 표시하는 것이 가능.





Language.js

export default Language; //コンポーネントをexport

App.js

import React from 'react'; 
import Language from './Language'; //コンポーネントをインポート
class Language extends React.Component{ 
  render(){ 
    return(
      <div>
        <h1>言語一覧<h1>
        <Language /> 
    );
  }
}

props

App.js로부터 각 언어의 이름과 이미지의 데이터를 Language 컴퍼넌트에 건네주는 것으로 언어마다 표시를 바꿀 수 있다. App.js에서 전달하는이 데이터를 props라고합니다. props=値 의 형태로 컴퍼넌트를 호출하는 개소로 건네준다.

App.js

<Language
  name='HTML&CSS'
  image='https://~'
/>

Language.js

render(){
  console.log(this.props);
  return( ... );
}

　 건네받은 값은 this.props 로 취득할 수 있다. {props名:値} 라는 객체가 된다.

콘솔

{
  props:"HTML&CSS",
  image:"https://~~"
}

props 얻기

this.props 라고 쓰는 것으로 {props:値} 라고 하는 오브젝트를 취득할 수 있으므로, this.props.props名 로 하는 것으로, props의 값을 취득할 수 있다.

Language.js

<div className='language-name'>
  {this.props.name)
</div>
<img className='language-image' src={this.props.image} />

map 메소드

배열내의 모든 요소에 처리를 실시해, 그 반환값으로부터 새로운 배열을 작성하는 메소드. JSX를 map을 사용하여 효율적으로 표시하고 있다. map 메소드로 배열의 각 요소에 대해 순서대로 처리를 하여 표시할 수 있다.

App.js

const languageList=[
  {name:'HTML&CSS', image:'https://~'}
];
...
<div>
  {languageList.map((languageItem)=>{
  return(
    <Lanuage
      name={languageItem.name}
      image={languageItem.image}
    />
  ...