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