[React 따라하기 #7] React Components(컴포넌트) 참조하기

React Components 참조하기

 

다른 컴포넌트들을 참조하는 방법입니다.

 

- 컴포넌트안에 다른 컴포넌트를 포함

See the Pen KKwXPVg by Seunggeun Oh (@seunggeun-oh) on CodePen.

다른 class 를 갔다 쓰시면 됩니다. 여러번 재사용 가능합니다.

 

 

- 다른 파일(.js) 에 있는 컴포넌트를 포함

위와 비슷한데 단지 class 선언을 다른 js 파일에 한것을 가져오는 방법입니다.
import 를 하면 됩니다.

웹스톰에서 생성 프로젝트(hello-world)에서 
src 폴더 아래 HelloFile.js 파일을 하나 생성합니다.

// HelloFile.js

import React from 'react';

class Hello extends React.Component{
    render(){
        return 'Hello ' + this.props.name;
    }
}

export default Hello;

 

App.js 에서 HelloFile.js 의 Hello 컴포넌트를 가져다 씁니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from './HelloFile';	// <== 여기 추가

function App() {
  let hello_h1 = <h1>Hello World~</h1>;
  return (
    <div className="App">
      {hello_h1}
      <Hello name="bryan" />		// <== 이렇게 사용
    </div>
  );
}

export default App;

 

index.html 을 실행하면 
(실행 방법은 cmd 로 해당 프로젝트 폴더에 가서 yarn start 를 날려주면 됩니다.)

잘 됩니다.

 

 

2019/12/27 - [HTML,Javascript] - [React 따라하기 #1] React 개발에 필요한 도구 설치

2019/12/30 - [HTML,Javascript] - [React 따라하기 #2] React 시작하기 hello world!

2019/12/30 - [HTML,Javascript] - [React 따라하기 #3] Codepen에서 실행해보기

2019/12/30 - [HTML,Javascript] - [React 따라하기 #4] ES6, js Class 에 대한 간단한 설명

2019/12/30 - [HTML,Javascript] - [React 따라하기 #5] React JSX

2019/12/30 - [HTML,Javascript] - [React 따라하기 #6] React Components(컴포넌트)