작은 단위로 나눈 리액트 컴포넌트들은 서로서로 얽혀서 거대한 앱을 만들 수 있다

컴포넌트 인스턴스

render() 메소드는 다른 컴포넌트 인스턴스를 return 값으로 가질 수 있음

class OMG extends React.Component {
  render() {
    return <h1>Whooaa!</h1>;
  }
}
 
class Crazy extends React.Component {
  render() {
    return <OMG />;
  }
}

위와 같이 그냥 JSX 문법을 리턴할 수도 있지만, 다른 컴포넌트를 리턴할 수 있음

이 때 리턴하면서 해당 컴포넌트 클래스를 인스턴스화 하는 것이니까, 인스턴스를 리턴하는 것
= 컴포넌트 안에서 컴포넌트 렌더링

이전까지는 ReactDOM.render() 안에서 렌더링 되었던 컴포넌트가 이제는 다른 컴포넌트의 render() 메소드 안에서 렌더링 되는 것

컴포넌트들 간의 연결

💡 리액트는 ES6의 Module System을 사용

https://exploringjs.com/es6/ch_modules.html

Import

아무 연결이 되어있지 않으면 컴포넌트들끼리 서로가 서로를 불러올 수 없음
➡️ import 필요!

import React from 'react';
import { NavBar } from './NavBar.js'

ProfilePage.js에서 NavBar.js를 import 해야 사용할 수 있음

1. React와는 다르게 NavBar는 {}로 쌓여있음
2. from 뒤도 'react' 와 './NavBar.js'로 다른 형식
   : 컴포넌트 경로를 설정해주어야함 + js는 생략 가능!

Export

다른 파일에서 import를 하려면 먼저 export를 해주어야함

Named Export
export 키워드를 export 하고싶은 것 바로 앞에 붙이면 됨
var, let, const, function, class 다 export 가능

export const faveManifestos = {
  futurist: 'http://www.artype.de/Sammlung/pdf/russolo_noise.pdf',
  agile:  'https://agilemanifesto.org/iso/en/manifesto.html',
  cyborg:   'http://faculty.georgetown.edu/irvinem/theory/Haraway-CyborgManifesto-1.pdf'
};
 
export const alsoRan = 'TimeCube';

한 파일에서 여러개의 export가 있을 수 있음

이렇게 Named Export로 내보낸 것을 import 할 땐 {} 사이에 모든 변수명을 넣음

import { faveManifestos, alsoRan } from './Manifestos';

그리고 import 해온 파일에서 이 변수명을 사용하면 됨!

이렇게 컴포넌트들을 중첩(nesting)하는 것이 리액트의 무기 ⚔️