[React] Hello World부터 시작하기

Oct 19, 2020

요즘 코드샌드박스( CodeSandbox )에서 놀고 있습니다. 자바스크립트를 연습해 보기 좋습니다.

원래 자바스크립트를 사용하려면 인스톨해야하는 것이 엄청 많은데, 나같은 귀차니스트를 위한 웹서비스입니다. 필요한 라이브러리가 있으면 그냥 그것을 사용하겠다고 알려주면 됩니다. 왼쪽 아래 화면에 있는 dependency가 그 부분입니다.

이걸 이용해서 Reactjs의 공식 홈페이지에 있는 내용을 내 나름대로 설명합니다. 일단 새로운 샌드박스를 만듭니다. React를 선택합니다.

그럼 다음과 같은 sandbox가 만들어집니다.

처음에는 디렉토리 구조가 익숙하지 않았지만, 자꾸 보면 이해가 갑니다.

public/
...index.html
src/
...App.js
...index.js
...styles.css
package.json

여기서 우리가 건드리는 것은 App.js입니다. index.js에도 뭔가가 있는데 이게 연관이 되어있구나 하는 것만 확인하고 넘어가면 됩니다.

React homepage의 첫번째 예제는

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

인데, 이게 codesandbox에는 여기저기 분산되어 있습니다..

우선 index.js 에

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";const rootElement = document.getElementById("root");ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

그리고 App.js 에

import React from "react";
import "./styles.css";export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

따라서 index.js 와 App.js 를 잘 합치면 주어진 예제와 같이 모양이 될 수 있을 것 같음을 확인할 수 있습니다.

[React] Hello World부터 시작하기

Written by A Ydobon

No responses yet