[ReactJS] Hello World

ReactJS Hello World: 공식 홈페이지 원문

Hello World

여타 다른 언어를 공부할 때 처럼, React를 배우는 가장 쉬운 방법은 CodePen에 게시된 Hello World 예제를 살펴보는 것입니다. 아무것도 설치할 필요 없이 CodePen을 통해서 예제를 따라할 수 있습니다. 로컬 컴퓨터에 설치해서 예제를 수행해보길 원하는 경우 Installation 페이지를 참조하여 설치를 진행하길 바랍니다.

가장 간단한 Hello World 예제는 아래와 같습니다.

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

위의 코드는 React를 사용한 코드로, h1 태그로 구성된 "Hello, world!"를 화면에 보여주는 예제입니다.

이후에 다루게 될 다양한 주제들은 순차적으로 React를 사용하는 법에 대해서 다루게 됩니다. element나 component에 대해 개발 방법을 조사한뒤, 재사용이 가능한 작은 조각들로 구성된 복잡한 앱을 만드는 작업으로 넘어가도록 합시다.

JavaScript와 React

React는 JavaScript 라이브러리이기 때문에, 향후 문서들은 JavaScript 언어에 대한 기본적인 지식이 있다는 가정하에 예제들을 다룹니다. JavaScript에 대한 충분한 지식이 없다고 생각될 경우 공부를 한 뒤 예제를 따라하는 것이 수월할 것입니다.

몇몇 예제들에서는 ES6 문법을 사용합니다. 아직 모든 브라우저에서 완전히 도입되지는 않은 새로운 버전의 문법이기 때문에 거의 사용하지 않으려 하지만, arrow functions, classes, template literals, let, const 구문을 사용하는 것에 익숙해지기를 권장합니다. Babel REPL을 통해서 ES6를 사용한 코드의 컴파일 여부를 확인할 수 있습니다.