들어가기 전에

이번 시간에는 리덕스없이 리액트만으로 간단한 애플리케이션을 만들어 보겠습니다.

우선 우리 강의에서는 개발환경을 세팅하기 위해서 Visual Studio Code라는 Tool을 사용합니다.

여러분은 자기가 좋아하는 editor 를 사용하시면 됩니다.

학습목표

리액트를 이용하여 컴포넌트를 생성하고 기본적인 애플리케이션 구조를 만들 수 있습니다.

핵심단어

• 리액트 개발환경
• create-react-app
• import
• export

강의 듣기

이번 시간에는 리덕스 없이 리액트만으로 간단한 애플리케이션을 만들어보겠습니다. 

우선 개발환경을 세팅하겠습니다. 강의에서는 Visual Studio Code를 이용합니다.

리액트를 사용하기 위해선 리액트를 설치하기 위한 툴인 create-react-app을 사용해야 합니다. 

npx  create-react-app .

위 명령을 통해 현재 디렉토리(.)에 리액트를 개발할 수 있는 기본적인 템플릿을 세팅하고, 리액트 개발환경이 세팅되었습니다.

npm run start

npm run start 명령어를 통해 기본적인 템플릿을 실행시킵니다.

명령어를 실행하면 템플릿 기본 파일이 만들어집니다. src 폴더에 index.js 파일이 root 파일입니다.

"app.js" 파일의 필요 없는 내용을 지웁니다. 

import React from 'react';
import './App.css';
function App() {
  return (
    <div className="App">
       Hello World
    </div>
  );
}

export default App;

위 코드를 추가하여 개발을 시작하기 전에 Hello World를 출력하는 간단한 사이트가 만들어진 상태입니다.

이 기본 틀에서부터 애플리케이션을 간단하게 구현을 해보겠습니다. 

우선 이전 시간에 보여드렸던 애플리케이션에서 버튼을 누르는 파트와 눌렀을 때 화면에 표시되는 파트가 나뉘어있습니다.

버튼을 누르는 부분부터 구현해보겠습니다.

리액트의 클래스 방식으로 작성할 것이기 때문에 컴퍼넌트라고 하는 것을 로드한 다음에

클래스 이름은 AddNumberRoot 라는 이름으로 만들고, 동작하기 위한 필수 method인 render() 함수를 넣어 코드를 작성합니다.

이렇게 구현한 AddNumberRoot 컴포넌트를 App() 의 자식으로 추가시킵니다.

import React, {Component} from 'react';


//AddNumberRoot 생성
class AddNumberRoot extends Component{
    render(){
      return (
        <div>
          <h1>Add Number Root</h1>
        </div>
      )
    }
  } 

function App() {
  return (
    <div className="App">
       Hello World
      //자식으로 추가
      <AddNumberRoot></AddNumberRoot>
    </div>
  );
}

UI를 구분되게 하기 위해 "app.css" 파일을 수정합니다.

div{
  border:5px solid #764abc;
  margin:10px;
  color:#764abc;
  padding:10px;
} 

 확장 기능에 설저되 있는 rcc + tab 키 단축 기능을 사용해서 기본적인 리액트 탬플릿 코드가 완성되게 할 수 있습니다.

AddNumber 컴포넌트도 구현합니다. AddNumber 컴포넌트는 는 AddNumberRoot 컴포넌트의 자식으로 들어갑니다.

class AddNumber extends Component {
    render() {
      return (
        <div>
          <h1>Add Number</h1>
          <input type="button" value="+"></input>
          <input type="text" value="0"></input>
        </div>
      )
    }
  }

//AddNumberRoot  추가 내용
      return (
        <div>
          <h1>Add Number Root</h1>
          //자식으로 추가
          <AddNumber></AddNumber>
        </div>
      )

실행해 보면 아래 화면과 같이 출력되는 것을 확인할 수 있습니다.

그 다음에 Display 영역을 우리가 만든 코드를 활용해서 만들어보겟습니다.

DisplayNumber에는 화면에 보여주는 UI만 있으면 되고, 이 UI은 수정을 하지 않을 것이기 때문에 read only로 처리했습니다.

<input type="text" value="0" readOnly></input>

그리고 DisplayNumberRoot를 APP 컴포넌트의 하위에 추가합니다. 아래 화면과 같이 잘 출력되는 것을 확인할 수 있습니다.

이제 우리 애플리케이션은 인덱스 아래에 Root가 최상에 있고 그 밑에 AddNumberRoot, 그 밑에 AddNumber가 있습니다.

그리고 DisplayNumberRoot 아래에 DisplayNumber가 있는 간단한 틀을 만든 것입니다.

디렉터리 구조를 정리하기 위해서 src 폴더 안에 components라고 하는 폴더를 만들고, 이 폴더로 컴포넌트들을 옮기겠습니다.

우선 AddNumber를 옮겨보겠습니다. AddNumber.jsx 파일을 만들고 코드를 옮겨 넣습니다.  

이 코드가 실행이 되려면 App .js 있는 리액트 와 관련된 코드가 있어야 합니다. 그리고 AddNumber를 export 시킵니다.

import React, {Component} from "react"
export default class AddNumber extends Component {
//생략

"export default" 키워드를 통해 이 컴포넌트를 사용하는 쪽에서 마음대로 이름을 변형할 수 있게 됩니다.

마찬가지로 AddNumberRoot.jsx 파일도 생성합니다.

AddNumberRoot.jsx 파일에서 AddNumber 컴퍼넌트를 사용하기 위해서는 import가 필요합니다.

import AddNumber from "../components/AddNumber";

그 다음에  App.js 파일에서 사용할 수 있도록 App.js파일에서도 AddNumberRoot 컴포넌트를 import합니다. 

import AddNumberRoot from "./components/AddNumberRoot";

코드를 작성한 후 실행하면 잘 동작하는 것을 확인할 수 있습니다. 같은 방법으로 이번에는 Display 부분도 분리합니다.

이렇게 해서 애플리케이션의 기본적인 구조를  갖추는 작업을 진행했습니다.

생각해보기

 우리 수업에서처럼 파일로 쪼개는 것은 어떤 효과를 가져올 수 있을까요?