React 시작하기 1. Component

리엑트 프로젝트를 생성하였다고 가정하고 컴포넌트를 만들어보자.

 

(프로젝트 생성 참고)

https://seokbong.tistory.com/116

React node로 react app 만들기 및 실행

 

1. src/Sample.js

import React from 'react';

function Sample() {
  return <div>Sample Component!!</div>
}

export default Sample;

 

 

위와 같이 Sample 컴포넌트를 작성하고 App.js로 이동하여 다음과 같이 작성한다.

 

2. src/App.js

import React from 'react';
import Sample from './Sample';  // Sample component 불러오기

function App() {
  return (
    // 아까 작성한 Sample component 사용
    <Sample />
  );
}

export default App;

 

그리고 터미널에서 해당 프로젝트로 접근한 후 실행을 시키면...?

npm start

 

출력 확인

 

잘 출력된다!

 

그리고 다음과 같이 수정해 보자.

 

3. src/App.js

import React from 'react';
import Sample from './Sample';  // Sample component 불러오기

function App() {
  return (
    // 아까 작성한 Sample component 사용
    <div>
      <Sample />
      <Sample />
      <Sample />
      <Sample />
      <Sample />
    </div>
  );
}

export default App;

감이 오지 않는가?

 

말 그대로 컴포넌트로 구성이 되어 반복 사용도 가능하다.

 

4. src/index.js 와 public/index.html 을 열어보면 ReactDOM Render (root.render)로 실제 돔 내부에 React component를 생성(랜더링)하는 것을 확인할 수 있다.

(좌) index.js / (우) index.html

 

진짜다.

 

 

 

 

---

해당 시리즈의 ref.

https://react.vlpt.us/

벨로퍼트와 함께하는 모던 리액트 · GitBook