[리액트 with 노마드코더] 컴포넌트 만들기

리액트에서는 하나의 앱은 하나의 컴포넌트밖에 렌더링할 수 없다.

무슨 말이냐하면

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

이런식으로 App, Potato라는 컴포넌트를 동시에 렌더링할 수 없다는 말이다.

 

그러면 어떻게 하냐

App.js라는 컴포넌트에 Potato까지 넣어서 한꺼번에 렌더링하면 된다.

 

Potato.js

import React from 'react';

function Potato() {
  return <h3>I love Potato</h3>;
}

export default Potato;

 

App.js

import React from 'react';
import Potato from './Potato';

function App() {
  return (
    <div>
    <h1>Hello!!!</h1>
    <Potato/>
    </div>
    );
}

export default App;

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

 

App.js에서 만들어놓은 Potato.js라는 컴포넌트를 jsx형식으로 끼워넣어주고 App만 렌더링하면 브라우저에서는

이렇게 컴포넌트가 완벽하게 들어가있다.

 

오... 놀라운 매직... 이걸 응용해서 앞으로 작업하게 될 것 같다