출처: https://www.codecademy.com

.render() 내에서 Component 의 사용

.render() 메서드는 HTML-like JSX 요소 <div></div>, <p></p>, <h1></h1> 표현 등을 리턴한다.

    class Example extends React.Component {
      render() {
        return <h1>Hello world</h1>;
      }
    }

또한, 아래 코드처럼 Crazy의 render 메서드가 OMG 컴포넌트 클래스의 인스턴스를 리턴하는것도 확인할 수 있다.

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

그렇다면, 다른 파일의 클래스를 사용하려면 어떻게 해야할까?

import

ProfilePage.js 파일과 NavBar.js 파일이 동일한 경로에 서로다른 파일로 있다.

ProfilePage 에서 NavBar 에 있는 컴포넌트를 사용하려면 import & export 작업을 해줘야한다.

import { 파일명 } from '경로'; -> import { NavBar } from './NavBar';

    // ProfilePage.js 파일
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { NavBar } from './NavBar';
    
    class ProfilePage extends React.Component {
      render() {
        return (
          <div>
    		<NavBar />  //위에서 import 하고 여기서 사용 
            <h1>All About Me!</h1>
            <p>I like movies and blah blah blah blah blah</p>
            <img src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-monkeyselfie.jpg" />
          </div>
        );
      }
    }
    
    ReactDOM.render(<ProfilePage />, document.getElementById('app'))

.

    // NavBar.js 파일
    import React from 'react';
    
    class NavBar extends React.Component {
      render() {
        const pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
        const navLinks = pages.map(page => {
          return (
            <a href={'/' + page}>
              {page}
            </a>
          )
        });
    
        return <nav>{navLinks}</nav>;
      }
    }

export

하지만 위 NavBar.js 파일에서 export 작업이 없었기 때문에 ProfilePage의 부분은 아무 동작도 하지 못한다.

export도 간단하다.

export 하고자 하는 var, let, const, function, class 등의 키워드 앞에 export 만 붙여주면 된다.

    // NavBar.js 파일
    import React from 'react';
    
    export class NavBar extends React.Component {
      render() {
        const pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
        const navLinks = pages.map(page => {
          return (
            <a href={'/' + page}>
              {page}
            </a>
          )
        });
    
        return <nav>{navLinks}</nav>;
      }
    }

실행 결과