[React] 리액트 테스트 앱 생성 및 수정

리액트 개발환경 구축이 안 된 분들은 아래 링크 참조

2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축

 

1. 테스트 프로젝트 생성 및 구동

예시는 윈도우 환경과 상기한 개발환경이 구축됐다는 전제로 쓰겠습니다.

먼저 명령 프롬프트(cmd)를 열고 하기와 같이 입력합니다.(프로젝트명은 test_project)

yarn create react-app test_project

yarn이 프로젝트 생성 중

이런 식으로 기본 프로젝트 골격이 자동으로 완성됩니다. 그다음은 프로젝트 루트 폴더(test_project) 이동해서

yarn start

생성한 프로젝트 기동

기본 포트는 3000번이지만 사용중일 경우 다른 포트 번호도 기동 가능합니다.

 

브라우저에 기동된 화면

본인이 사용하는 기본 브라우저에 로컬호스트 주소로 위 화면처럼 나오면 성공!

 

2. 테스트 프로젝트 간단히 수정해보기

프로젝트 루트폴더

본인이 생성한 폴더로 이동해보면 위 화면처럼 구성이 되어있습니다. src폴더가 소스 폴더입니다.

이번에는 간단히 스타일을 적용한 Hello, world 문자를 출력해보겠습니다. (프로그래머의 국룰)

 

• src폴더로 이동해서 App.css 파일을 에디터로 열어봅니다.
• 앱의 스타일시트이니 아래처럼 스타일 하나를 추가합니다.

.title {
    font-weight: bold;
    font-style: italic;
}

 

• 이번에는 App.js 파일을 열어 아래 처럼 수정해봅니다.
• 수정 후 저장을 하면 리액트가 자동으로 화면을 갱신합니다. 

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1 className="title">Hello, world!</h1>
      </div>
    );
  }
}

export default App;

react와 App.css가 임포트 되어 있고, App클래스는 컴포넌트를 상속받고 있습니다.

render() 함수는 리액트에서 HTML로 변환해서 반환합니다. 나머지는 HTML 문법과 비슷하지만

div태그의 class는 자바스크립트 class 예약어와 중복되므로 꼭 className으로 사용해야 합니다!

 

브라우저에 Hello, world! 가 잘 나왔나요?

그럼 오늘은 여기까지~ 참 쉽죠?

---

 

2020.09.11 - [웹 프론트엔드/React 리액트] - [React] 리액트에서 사용하는 JSX