# React로 Hello World 출력

- Author: @baealex
- Published: 2020-01-05
- Updated: 2021-08-10
- Source: http://blex.me/@baealex/react%EB%A1%9C-hello-world-%EC%B6%9C%EB%A0%A5
- Tags: 프로그래밍, 자바스크립트, 리액트, 프론트엔드

---

## Hello, React

@gif[https://static.blex.me/images/content/2020/2/22/V0q9GL3pLXBcA48qvNtK.mp4]

React로 Hello World를 출력해보자. 기본적인 설치 방법과 사용 방법을 기록하기 위해서 작성한다.

<br>

#### How to install

```
npm install -g create-react-app
```

<br>

#### How to make application

```
create-react-app hello-world
```

위 명령어를 이용하여 애플리케이션을 생성할 수 있다. 생성된 디렉터리 아래 `src` 내부의 모든 파일을 지운 뒤 `index.js`와 `index.css`를 생성하고 `index.js`에 아래와 같은 내용을 추가한다.

```js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
```

그 후 터미널에서 다음 명령어를 사용하여 테스트 화면을 볼 수 있다.

```
npm start
```

<br>

#### Component

React의 경우는 대부분 컴포넌트 단위로 작업이 이루어진다. 컴포넌트는 객체형 혹은 함수형으로 작성할 수 있는데 위 코드를 각각의 형태로 분리한 형태는 다음과 같다.

###### Function

```js
function Hello() {
    return(
        <h1>Hello, world!</h1>
    )
}

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

###### Class

```js
class Hello extends React.Component {
    render() {
        return (
            <h1>Hello, World!</h1>
        )
    }
}

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

원레 객체형과 함수형의 차이는 `state`를 쓸 수 있냐 없냐고 구분할 수 있었는데 이번에 `Hooks`라는 개념이 도입되면서 어려워졌다. 자세한 내용은 [이곳을](https://overreacted.io/ko/how-are-function-components-different-from-classes/) 참고해 보는 것도 좋을 것 같다.