React로 Hello World 출력

Hello, React

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


How to install

npm install -g create-react-app


How to make application

create-react-app hello-world

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

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

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

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

npm start


Component

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

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

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);
Class
class Hello extends React.Component {
    render() {
        return (
            <h1>Hello, World!</h1>
        )
    }
}

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

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

이 글이 도움이 되었나요?

신고하기
0분 전
작성된 댓글이 없습니다. 첫 댓글을 달아보세요!
    댓글을 작성하려면 로그인이 필요합니다.