Hello, React

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


How to install

1
npm install -g create-react-app


How to make application

1
create-react-app hello-world

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

1
2
3
4
5
6
7
8
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

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

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

1
npm start


Component

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

Function
1
2
3
4
5
6
7
8
9
10
function Hello() {
    return(
        <h1>Hello, world!</h1>
    )
}

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);
Class
1
2
3
4
5
6
7
8
9
10
11
12
class Hello extends React.Component {
    render() {
        return (
            <h1>Hello, World!</h1>
        )
    }
}

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

원레 객체형과 함수형의 차이는 state를 쓸 수 있냐 없냐고 구분할 수 있었는데 이번에 Hooks라는 개념이 도입되면서 어려워졌다. 자세한 내용은 이곳을 참고해 보는 것도 좋을 것 같다.

WRITTEN BY

배진오

소비적인 일보단 생산적인 일을 추구하며, 좋아하는 일을 잘하고 싶어합니다 :D
im@baejino.com