react.js 시작하기 190802 - 컴포넌트 데려오기(경로쓰)

경로를 찾아보자

 

파일 구조는 다음과 같다.

App.js에서 sub com0을 데려오고

com0을 부모로 둔 com1에 같은 부모를 둔 com2를 데려올 것이다.

걍 상위 컴포넌트를 부모라고 표현해따.

 

import React, { Component } from 'react';
import Com0 from './sub/com0'
class App extends Component {
  render() {
    return (
      <div>
        <h1>App.js</h1>
        <Com0/>
      </div>
    );
  }
}

export default App;

App.js는 com0을 불렀다

import React, { Component } from 'react';
class Com2 extends Component {
    render() {
        return (
            <div>
                <h1>com2</h1>
            </div>
        );
    }
}

export default Com2;

자이제 com2는 이렇게 생겨먹었다 가장 하위 컴포넌트이다.

 

중간에 낀 com1을 보자

import React, { Component } from 'react';
import Com2 from '../com_2/com2'
class Com1 extends Component {
    render() {
        return (
            <div>
                <h1>com1</h1>
                <Com2/>
            </div>
        );
    }
}

export default Com1;

com2를 부르기위해서

import Com2 from '../com_2/com2'

이렇게 import 시켰다

 

해석해보자면

 

./

현재위치

../

현재위치의 위 폴더에

../com_2

위 폴더의 com_2라는 폴더에

../com_2/com2.js

라는 뜻이 된다.

 

요래 다 불러짐 끝.