ReactApp 만들기 - React 설치

구현할 기능 정리하기

앱(페이지)을 구현하기 전, 앱에 들어갈 기능을 먼저 정리하고 들어가자, 이전 구현한 경험이 있는 기능과

새로 구현하고 싶은 기능은 아래와 같다.

구현한 적 있는 기능

1. 현재 시간 알려주는 기능 (시계)
2. 날씨 정보를 반환하는 기능 (API)
3. 할 일을 등록할 수 있는 기능 (Form)
4. 할 일 리스트를 보여주는 영역 (Todo-list)
5. 할 일을 지울 수 있는 기능

새롭게 구현해 보고 싶은 기능

1. 만다라트 생성
2. 날씨 현황에 따른 배경화면 이펙트

기능 구현 내용이 정리되었다면, 본격적으로 Ract를 설치하자

npx create-react-app {appname}

{appname}에 대문자가 포함된다면, 설치되지 않으므로 소문자로 이름을 정해주자

설치가 완료된 후, 폴더로 이동하여 프로그램이 정상적으로 작동되는지 확인한다.

cd {appname} // 설치한 앱 이름(폴더 이름)으로 대체
npm start // 앱 시작

Rreact App 설치 과정에서 필요한 파일들을 자동 생성해주기 때문에 별도 편집 없이도 앱 구동이 가능하다.

앱 구동시 초기 화면

설치 완료를 확인했다면, 이제 내가 만들고 싶은 페이지로 만들어 주기 시작하자.

실제로 Ract가 랜더링 되는 파일은 public폴더 내 index.html 이고, 우리가 작업을 할 영역은 src 폴더 내 app.js 파일이다.

// src/app.js

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

function App() {
  return (
    <div className="App">
      // 초기 설정 값
      // 이 안에서 작업
    </div>
  );
}

export default App;

초기 설정된 내용중에서 내가 구상한 앱에 필요한 내용은 없으므로 모두 삭제한다.

단, return ( 코드 ) 작성 시, 반드시 한개의 태그 안에 모든 내용이 있어야 하므로, className="App' 에 해당하는 태그는 남겨두었다.

// src/app.js 수정 후 코드

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

function App() {
  return (
    <div className="App">
      <h1 className='clockInfo'> clock infomation will here</h1>
      <h3 className='wheaterInfo'> wheater infomation will here</h3>
      <div className='todoList'> todo-list will here</div>
      <form> 
        <input type='text' placeholder='write your todoList'/>
      </form>
    </div>
  );
}

export default App;

그 다음으로, 표현하고 싶은 영역과 내용을 표기한 후 저장을 하게 되면, 페이지는 자동으로 새로고침 되어 바로 확인이 가능하다.

코드 수정 후 페이지 화면 예시

초기 설치 때 있었던 css 호출 코드 (import ./App.css) 라인을 지우지 않아서

className="App" 아래 모든 컨텐츠가 중앙으로 정렬되었다. 해당 코드를 지우면 css 적용이 되지 않은 상태 (좌상단 정렬)로 변경될 것이다.

가운데 두는 것이 좌상단에 들어가는 것 보다는 있어보이므로, 일단은 그냥 두고 진행해야겠다.