react.js 시작하기 190801 - import, component, props

import

import React, { Component, Fragment } from 'react';

from 'react'라는 부분에서 default export 해주는 React를 데려온다.

'react'에서 단 하나의 default export해주는 애는 데려왔으니

그 안에 다른 class를 데려오고 싶은 경우에는 어떻게 해야할까?

그럴땐 옆에 쓰여진 것 처럼 { } 스코프를 사용하면 된다.

 

사용시 주의점은 { } 스코프 안에 있는 것을 불러오고 싶을 때

반드시 export를 시켜줘야한다.

/* App,js */
import React, { Component, Fragment } from 'react';
import './App.css'
import Bpp, { Test } from './Com/bpp'
//import Cpp from './Com/cpp'
class App extends Component {
  render() {

    return (
      <Fragment>
        <Test/>
      <Bpp/>
        <h1>호오오오오오오오라앙이</h1>
      </Fragment>
    );
  }
}
export default App;


/* Bpp */
import React, { Component } from 'react';

class Bpp extends Component {
    render() {
        return (
            <div>
                <h1>머어어어어어엉ㅇ멍이</h1>
            </div>
        );
    }
}

export class Test extends Component {
    render() {
        return (
            <div>
                <h1>머어어어어어엉ㅇ멍이</h1>
            </div>
        );
    }
}

export default Bpp;

예를 들어 Bpp.js안에 있는 Test class를 App.js에 갖다 쓸때 export class해주지 않으면 오류가 일어나게 된다.

import Bpp from './Component/bpp'
import Cpp from './Component/cpp'

또한 다른 컴포넌트를 데려오고 싶은 경우에는 이렇게 경로를 명시한 곳에서 불러올 수 있다.

 

 

props

class App extends Component {
  render() {
    const info = {
      name : '깔깔',
      age: 30
    }
    return (
      <Fragment>
        <h1>호오오오오오오오라앙이</h1>
        <Bpp/>
        <Pp/>
        <Cpp/>
        <Dpp name='냐옹' age={30} h={23} info={info}/> 
        {/* 
        name을 통해서 일단 줬음
        props(properties의 약자) : 혹시 주는 게있다면 
        */}
      </Fragment>
    );
  }
}

다른 컴포넌트에 값을 전달해줄 경우에는 컴포넌트를 부른 태그 뒤에 아무거나 주면된다.

string을 보낼때에는 ' ', " ", ` ` 같은 쿼테이션을 붙여주면되지만

위에 선언된 객체를 불러오거나, number를 줄 경우에는 { } 스코프사이에 던져주면 알아서 잘 받아먹는다.

class Dpp extends Component {
  render() {
   
    return (
      <Fragment>
        <h1> {this.props.name} </h1>
        <h1> {this.props.age + this.props.h} </h1>
        <h1> {typeof this.props.age} </h1>
        <h1> {this.props.info.name } </h1>
        {/* '냐옹'얘를 넘겨줘서 받음 */}
      </Fragment>
    );
  }
}

값을 받는 컴포넌트에서 접근하는 방법은 this.props이다.

 

위처럼 넘겨준 값을 this.props.name이런식으로 값을 받아 전달하면 알아서 해석해 준다.

props는 부모에게서 받아 자기에서 쓰는 것이라고 할 수 있다.