React 시작하기

환경설정

01. Node.js 설치

  • https://nodejs.org/ko/download/ 에서 설치파일 다운로드 후 설치
  • node --version, npm --version 명령어를 실행하여 설치 여부를 확인

02. yarn 설치

03. create-react-app 설치

  • yarn 이용해서 설치 yarn global add create-react-app
  • 또는 npm을 이용해서 설치 npm install -g create-react-app

어플리케이션 생성

  • create-react-app [어플리케이션 명]

yarn을 이용해서 어플리케이션 생성을 완료하면 아래와 같이 출력됩니다.

  • yarn start (npm start) : 어플리케이션 실행
  • yarn build (npm run build) : 어플리케이션 배포
  • yarn eject (npm run eject) : 어플리케이션 설정

어플리케이션이 존재하는 경로로 이동 후 yarn start를 실행합니다.
실행 완료 후 http://localhost:3000/로 접근하면 아래와 같은 샘플페이지가 보이게 됩니다.

프로젝트 구조


  • public 폴더 : static 자원 및 가상 DOM을 보여줄 index.html이 존재하는 폴더
  • src 폴더 : 실제 구현할 소스들이 위치한 폴더

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer">
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

app.js에서 구현한 app 클래스를
index.js에서 ReactDOM.render(, document.getElementById(‘root’))를 통해
index.html의 id가 root인 div 내부에 랜더링

컴포넌트 생성

src에 Hello.js, Hello.css 를 추가 합니다.

src/Hello.js

import React from 'react';
import './Hello.css';

function Hello() {
    const name = 'World';
    return (
    <div className="Hello">
      Hello {name}!
    </div>
  );
}

export default Hello;

src/Hello.css

.Hello {
  font-size: 20px;
  font-weight: bold;
}

App.js를 변경

src/App.js

import React from 'react';
import './App.css';
import Hello from './Hello';

function App() {
  return (
    <div className="App">
      <Hello/>
    </div>
  );
}

export default App;

Hello World 라고 출력되는 것을 확인 할 수 있습니다.

JSX(Javascript XML)

  • 가독성 및 생산성이 향상
  • 컴파일이 빠르고, 변환과정에서 오류를 발생하므로 문법 오류를 줄일 수 있음

JSX

<div>
  <Hello/>
  <br/>
  <a href="www.google.com">Goole</a>
</div>

JSX 미사용

React.createElement(
  "div",
  null,
  React.createElement(Hello, null),
  React.createElement("br", null),
  React.createElement("a", {"href":"www.google.com"}, "Goole")
)

Hello.js

import React from 'react';
import './Hello.css';

function Hello() {
  function goWorld(welcome) {
    return welcome.first + ' ' + welcome.last;
  };

  const welcome = {
    first: 'React',
    last: 'World'
  };

  return (
    <h1>Hello, {goWorld(welcome)}!</h1>
  );
};

export default Hello;

ButtonEvent.js

import React from 'react';

function ButtonEvent() {
  function handleClick() {
    alert("Hello Alert");
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
};

export default ButtonEvent;

Timer.js

import React from 'react';

function Timer() {
  return (
    <h2>Now is {new Date().toLocaleTimeString()}</h2>
  );
};

export default Timer;

App.js

import React from 'react';
import './App.css';
import Hello from "./Hello";
import Timer from "./Timer";
import Button from "./ButtonEvent";


function App() {
  return (
    <div className="App">
      <Hello/>
      <Timer/>
      <Button/>
    </div>
  );
}

export default App;

실행 결과

  • 자바스트립트 표현식을 중괄호로 표현 가능
  • 요소의 이벤트 처리도 가능

지금까지 간략하게 React에 대해서 알아보았습니다. 다음에는 예제를 구축해 가면서 좀 더 심호 단계를 학습 하고자 합니다.

chyusee's profile image

chyusee

2019-10-17 10:00

chyusee 님이 작성하신 글 더 보기