디독 - 리액트 컴포넌트 만들기 기초

리액트 컴포넌트 만들기 기초

1. vscode로 [File] - [Open Folder...]로 리액트 워크스페이스를 연다.
ex) [File] - [Open Folder...] - D:\react-workspace\begin-react 폴더 선택

2. 파일 작성
src 하위에 있는 Hello.js를 아래와 같이 작성한다.

src/Hello.js

import React from 'react';

function Hello() {
return <div>안녕하세요</div>
}

export default Hello;

App.js파일을 아래와 같이 수정한다.
기존에 있던 이미지 등을 날리고, 방금 만든 Hello 컴포넌트를 넣는다.

src/App.js

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

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

export default App;

컴포넌트는 UI 조각이고, 재사용할 수도 있다.
3번 연속 사용하면 아래와 같이 된다.

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

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

export default App;