React 기초 (2) : 컴포넌트 기본 1

 

npm start. 서버 시동 걸어놓고 작업을 해보자.

우선 index.js에 다음과 같은 코드를 보자.

 

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

 

index.js의 component가 있다. <App /> 이렇게 생긴거. 이걸 component라 부른다.

 

component(<App />는 HTML을 반환(return)하는 함수이다.

 

app.js에 가보면(Ctrl + Click으로도 가능) function App이란 함수에 return으로 HTML을 반환하는 것을 볼 수 있을 것이다.

 

* HTML과 JS의 조합을 JSX라고 부른다. component는 JSX element이다. react에만 존재함.

 

 

 

자, component를 하나 만들어봅시다.

주의!
function이든 class든 컴포넌트의 첫문자는 무조건 대문자여야 한다. ex- Test (✔) tset(❌)
안그러면 렌더링이 안된다...

 

ⓐ src 안에 Potato.js 생성. // 첫글자 대문자

 

Potato.js 내부에

 

import React from 'react';



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

 

사실상 App.js와 구조가 똑같이 생겼다.

 

ⓑ index.js에

import Potato from ‘./Potato’;

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

 

와 같은 방식으로 작성하면 작동이 안되는데 이는 render가 하나의 component만을 처리할 수 있기 때문이다.

=> 따라서 <App /> component 내부에 Potato를 심어주는 방식으로 작동하게 만들어보자

 

ⓒ App.js의 App component에 Potato component를 직접 넣는 방식을 사용한다.

 

import Potato from ‘./Potato’;
function App() {
return (
<div>
<h1>Test</h1>
<Potato />
</div>
)
}