React로 Hello World 출력

React로 Hello World 출력

baealex

소비적인 일보단 생산적인 일을 좋아합니다.

Sign in to view email

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라는 개념이 도입되면서 어려워졌다. 자세한 내용은 이곳을 참고해 보는 것도 좋을 것 같다.

작성된 댓글이 없습니다!
로그인된 사용자만 댓글을 작성할 수 있습니다.