react.js 시작하기 190802 - index.js(folder를 import시키기)

리액트에서는 folder를 import시킬 수도 있다.

 

여기서 반드시 지켜주어야 할 약속된 파일이 있다.

 

아무거나 폴더를 하나 만들고 app.js같은 아무 컴포넌트에서

 

import Sub1 from './sub1'

위와 같이 떨렁 부르면 에러가 걸린다.

 

이 에러를 잡기 위해서는 반드시 index.js파일이 필요하다.

 

아마 해당 폴더 안에 index.js를 만들어주면 바로 에러가 풀린다.

 

무조건 이름이 index.js인 파일이 있어야 한다.

 

얘를 끌어오려면 폴더명 자체가 태그가 된다.

 

위의 코드로 예를 들면 원하는 곳에 <Sub1/>이렇게 두면 그 폴더의 index.js파일에 있는 컴포넌트가 딸려온다.

 

여기서 보듯 class의 이름은 바꾸어줘도 된다 근데 파일명은 index.js여야한다.

 

이 index.js가 하는 역할은 app.js와 같다고 생각하면된다.

 

거의 sub Component에서의 main? App.js이다.

 

맨 밑에 아뿔 출력된 것을 보면 된다.

 

App.js가 시작되는 지점도 app.js라고 볼수 있다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

index.js에 가보면 이렇게 되어있다.